PDA

Click to See Complete Forum and Search --> : IE7 top-margin Ignored Inside Absolutely Positioned DIV?

msmith29063
09-22-2009, 09:24 AM
IE7 is ignoring margin-top for a paragraph nested inside an absolutely positioned DIV. I've tried everything. Any ideas?
aj_nsc
09-22-2009, 10:13 AM
Can you show us your HTML/CSS?
msmith29063
09-22-2009, 10:33 AM
Here's the CSS:
#splash {
background: #fff;
margin: 0 auto 16px;
padding: 10px;
position: relative;
width: 928px;
height: 331px;
overflow: hidden;
border: solid 2px #e2e3c6
}
#splash .panel {
position: absolute;
top: 10px;
left: 948px;
width: 928px;
height: 294px
}
#splash #panel_what {
background: url("../images/panels/what.jpg") no-repeat;
}
#splash #panel_what p {
color: #333;
font-size: 18px;
line-height: 24px;
background-color: #f2dfc1;
margin: 26px 0 20px 497px;
width: 418px
}
Here's the HTML:
<div id="splash">
<div id="panel_what" class="panel clear">
<p>...</p>
</div>
</div>
Any ideas?
nathandelane
09-22-2009, 12:23 PM
I can't reproduce your issue. You have your outer centered div that contains another, absolutely positioned, div, which contains a paragraph tag that has margins, but everything looks right to me. I tested first in IE8, and then in IE7, and it looks correct. I don't know exactly what you are seeing that is wrong. You have your inner div positioned at 10 pixels from the top of the outer div. You then have your paragraph positioned (by the margin) 26 pixels from the top of the inner div. That puts it at about 36 pixels from the top of the outer div. Isn't that correct?
msmith29063
09-22-2009, 01:56 PM
Should be correct. There are more nested divs -- but I was trying to avoid posting all my CSS and HTML. Any possible culprits that you can think of? I'm also using a global reset at the top of the CSS file. Thank you for helping me troubleshoot this.
msmith29063
09-23-2009, 06:00 AM
Okay. Here's more. The CSS:
/*
** ***************************************************************
** slightly enhanced, universal clearfix hack
** ***************************************************************
*/
.clear:after {
font-size: 0;
visibility: hidden;
display: block;
height: 0;
clear: both;
content: " "
}
.clear {
display: inline-block
}
/*
** ***************************************************************
** commented backslash hack
** ***************************************************************
*/
* html .clear {
height: 1%
}
.clear {
display: block
}
#main {
background: url("../images/contenttopbg.png") no-repeat;
margin: 20px auto 0;
padding: 10px 4px 0;
position: relative;
width: 978px
}
#main .wrapperHome {
background: url("../images/contentbg.png") repeat-y;
padding: 29px 8px 0;
width: 962px
}
#splash {
background: #fff;
margin: 0 auto 16px;
padding: 10px;
position: relative;
width: 928px;
height: 331px;
overflow: hidden;
border: solid 2px #e2e3c6
}
#splash .panel {
position: absolute;
top: 10px;
left: 948px;
width: 928px;
height: 294px
}
#splash #panel_what {
background: url("../images/panels/what.jpg") no-repeat;
}
#splash #panel_what p {
color: #333;
font-size: 18px;
line-height: 24px;
background-color: #f2dfc1;
margin: 26px 0 20px 497px;
width: 418px
}
And the HTML:
<body>
<div id="main">
<div class="wrapperHome clear">
<div id="splash">
<div id="panel_what" class="panel clear">
<p>...</p>
</div>
</div>
</div>
</div>
</body>
Any ideas?
msmith29063
09-23-2009, 06:56 AM
Nevermind. Found the culprit. I also had an absolutely positioned h2. For some reason on IE7 -- I had to move it under the <p>. Thanks for your help!