Forum Moderators: not2easy
I have a website that is using what I call dynamic content/hidden divs. For example, when you click a checkbox another div pops down.
The problem I'm having is that in IE6 (Firefox/IE7/Opera etc are fine) the absolute positioning does not move after a hidden div is shown. This is an issue as I have some classes that have a background image to provide a gradient border effect. The classes are absolute positioned at the bottom of the page as follows:
.contentarea .lbb { background: url(../images/wrapper/content_borderlb.gif); position: absolute; bottom: 34px; height: 134px; left: 0; } /*for the left gradient border*/.contentarea .rbb { background: url(../images/wrapper/content_borderrb.gif); position: absolute; bottom: 34px; height: 134px; right: 0px; width: 5px;} */for the right gradient border*/
When you expand the DIV in IE, the page expands, but those absolute positioned divs stay in exactly the same place! The result can be seen in this comparison screen shot (the problem issue is hilighted with an arrow): <sbip>
Does anyone have any suggestions?
FYI, the page is available here so you can see yourself. If you test it on Firefox/IE7 vs IE6 you should see what I'm talking about:
Thanks!
Josh
[edited by: SuzyUK at 9:17 pm (utc) on Nov. 29, 2006]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]
Try playing around with using position:relative rather than absolute for the .lbb and .rbb divs.
(I know this isn't the most helpful post, but I'm too tired to work through it properly!)
I had a look and it was an intriguing one so I stripped your code, added some colors and the sample below shows the problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body {
margin: 0;
padding: 6px 0;
background: #FFF;
font-family: Verdana, Arial, Helvetica;
font-size: 11px;
}.wrapper { position: absolute; left: 50%; width: 600px;margin-left: -300px;}
.inside {
border-left: 5px solid #dbdee1;
border-right: 5px solid #dbdee1;
background: #fcf;
}.lbt { background: #0f0; position: absolute; top: 0; left: 0; height: 90px;}
.rbt { background: #ff0; position: absolute; top: 0; right: 0; height: 90px;}
.lbb { background: #0f0; position: absolute; bottom: 0; left: 0; height: 134px;}
.rbb { background: #ff0; position: absolute; bottom: 0; right: 0; height: 134px;}.fullbox {background: #abc;}
/* the presense of a bottom border or border padding on either cbox or fullbox throws IE out of whack */
.cbox {
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #f00;
padding: 45px 25px 20px 35px;
}.fullbox {
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #000;
}#recurrencetime {
background: #ffc;
display:none;
padding: 1px 0; /* collapsing margins */
/*margin-bottom: 30px;*/
}
</style>
<script type="text/javascript">
function showRecurrence(box2){
var caldiv = document.getElementById('recurrencetime');
if(box2.checked==true){
caldiv.style.display="block";
}
else{
caldiv.style.display="none";
}
}
</script>
</head>
<body>
<div class="wrapper">
<div class="contentarea">
<div class="inside">
<!--
<div class="lbt"> </div>
<div class="rbt"> </div>
<div class="lbb"> </div>
<div class="rbb"> </div>
-->
<div class="fullbox">
<div class="cbox">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<table cellpadding="0" cellspacing="0" class="innerForm" style="width: auto;">
<tr>
<td class="fieldname"><label for="campaign_recurrence">click checkbox to make it expand</label></td>
<td>
<input type="checkbox" id="campaign_recurrence" name="recurring" value="1" onclick="javascript:showRecurrence(this);" />
</td></tr></table>
<div id="recurrencetime">
<p>this has expanded.</p>
<p>expanding height will always be different</p>
<p>notice the grey left/right borders havent moved down accordingly</p>
</div><!-- recurrencetime -->
</div><!-- cbox -->
</div><!-- fullbox -->
<!-- one solution - move these divs to top of inside div --><div class="lbt"> </div>
<div class="rbt"> </div>
<div class="lbb"> </div>
<div class="rbb"> </div></div><!-- inside -->
</div><!-- contentarea -->
</div><!-- wrapper -->
</body>
</html>
*A* solution is in there, from what I can tell it is the presence of either bottom border or bottom padding on the "fullbox" OR "cbox" divs that is confusing the positioning in IE (btw it's OK in IE7) - change all bottom values to 0 and it works without HTML changes.
I tried a few layout fixes but that didn't work, I wonder if forcing a redraw would also work but maybe somebody else could try that at as solution..
I found that moving the absolutely positioned divs above the expanding div in the HTML helped and allows your bottom padding and borders.
Suzy
