Page 1 of 1
CSS Background Problem in IE with Nested Divs
Posted: 2005-02-10 06:21pm
by McC
Okay, I normally use Firefox, so when first coding this bunch of stuff, it didn't seem anything was wrong. Then I go over to IE and lo and behold, the innermost divs in this series
don't display their backgrounds!.
Code: Select all
<div id="container">
<div id="center">
<div id="header">
<div class="presents">Stuff here</div>
<div class="title">More stuff here</div>
</div>
</div>
</div>
Code: Select all
#container {
position: absolute;
width: 100%;
text-align: center;
}
#center {
position: relative;
width: 800px;
margin: 0 auto;
}
#header {
background: #349934;
border-top: 1px solid #B4B4B4;
border-left: 1px solid #B4B4B4;
border-right: 1px solid #5a5a5a;
border-bottom: 1px solid #5a5a5a;
padding-bottom: 10px;
margin-bottom: 8px;
}
.presents {
background: #1A4D1A;
padding: 1px;
font-weight: bold;
text-align: center;
}
.title {
text-align: center;
font-size: 20px;
letter-spacing: 4px;
}
The problem comes with the div.presents and div.title DIVs -- they simply don't display any background color that's attributed to them. Anyone know what's up? Doesn't happen in Firefox, just IE.
Posted: 2005-02-10 06:51pm
by phongn
Make sure that you have a DOCTYPE declaration, which will force IE6 into standards-compliance mode.
Posted: 2005-02-10 07:08pm
by McC
Didn't have one. I set it to XHTML 1.0 strict, but it still continues to not render the requisite background div. And I know for sure it's not a nesting issue, because a nested mess like
this does work.
So confused
Posted: 2005-02-11 07:32am
by Dooey Jo
IE can do weird stuff to CSS... Perhaps it thinks that the background should be inherited? Though that'd probably make that other page look weird too. Have you tried having those classes as ids instead?
And if you're using XHTML-strict you must have a CDATA declaration in your style (unless you're linking to it), and your <style> tag must have a type attribute. Though I think IE should work without that...
Edit: Typo...
Posted: 2005-02-11 11:14am
by McC
I've tried them as IDs and I've tried them was P tags instead of DIVs. Same deal. It does work if they're SPANs, interestingly, I'd much prefer to use DIVs.
Posted: 2005-02-11 11:15am
by Mad
I'm not sure of the exact problem, but this works in IE and Firefox:
Code: Select all
<div class="container">
<div class="header center">
<div class="presents">Stuff here</div>
<div class="title">More stuff here</div>
</div>
</div>
All I did was change your IDs to classes, since the names you gave them would suggest they are generic enough to be reused. Then I applied both the "header" and "center" classes to the second DIV.
This way is easier on both browsers to render, BTW.
Posted: 2005-02-11 12:05pm
by McC
Doesn't work for me...I get the same problem.
Posted: 2005-02-11 12:09pm
by CDS
Posted: 2005-02-11 02:11pm
by Mad
McC wrote:Doesn't work for me...I get the same problem.
That's odd... how about for
this test page? It works fine in Firefox and IE6.
Posted: 2005-02-11 02:56pm
by McC
Yeah, it works there...
Posted: 2005-02-11 03:02pm
by Mad
McC wrote:Yeah, it works there...
What's the modified code (HTML, CSS) of yours that isn't working?