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>
No comments:
Post a Comment