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>
