Eric, I don't have IE6 installed (just got a new laptop with windows 7), but I wasn't able to reproduce the issue in IE8 compatibility mode. SimpleModal only styles the dialog element, so I'm not sure why that would be affecting other divs on your page...
-Eric On Nov 26, 4:50 am, Eric Getchell <eric.getch...@gmail.com> wrote: > Hello, > > I am having an issue with the simplemodal plugin that I’m hoping > someone will have a solution for – or at least tell me what is > happening. I have a layout which uses absolute divs to provide a > three-column liquid layout. > > In IE 6 and 7, when simplemodal fires, any div that has both a left > and right style defined (providing the liquid portion of the layout) > collapses to a width of 1 pixel. Any div that only has a left/right > element and a width defined behaves correctly. > > Adding a conditional width to the liquid portion of the layout makes > IE behave correctly, but the content is no longer liquid. > > Below is the simplest piece of sample code I could produce that shows > the behavior. > > Any help would be appreciated – I’ve spent several days trying to > solve this issue with no luck so far. > > Eric Getchell > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <title></title> > <script type="text/javascript" src="jquery-1.3.2.min.js"></script> > <script type="text/javascript" src="jquery.simplemodal-1.3.3.js"></ > script> > <style type="text/css"> > * { > padding: 0; > margin: 0; > } > body { > overflow: auto; > height: 100%; > width: 100%; > } > #header-left > { > border: 1px solid blue; > position: absolute; > top: 0px; > left: 0px; > width: 300px; > height: 83px; > overflow: hidden; > > } > > #header-right > { > border: 1px solid red; > position: absolute; > top: 0px; > /* Defining oth left and right in IE will collapse content when > simplemodal fires.*/ > left: 302px; > right: 0px; > height: 83px; > overflow: hidden;} > > #main > { > position: absolute; > top: 205px; > left: 151px; > right: 15px; > bottom: 35px; > overflow: auto; > </style> > > <script type="text/javascript"> > function showModal() > { > $("#dialogContent").modal({ > overlay:80, > overlayCss: {backgroundColor:"#000"}, > containerCss: {'background-color':'#fff', 'padding':'5px', > 'border':'2px solid black'} > });} > > </script> > </head> > <body> > <div> > <div id="header-left">This is a fixed region</div> > <div id="header-right">This is a liquid region. This collapses in IE</ > div> > </div> > <div id="main"><a href="#" onclick="javascript:showModal();">Launch</ > a></div> > <div id="dialogContent" style="display:none">This is the modal > content</div> > </body> > </html>
