CSS Background Problem in IE with Nested Divs

McC · Post by **McC** » 2005-02-10 06:21pm

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.

phongn · Post by **phongn** » 2005-02-10 06:51pm

Make sure that you have a DOCTYPE declaration, which will force IE6 into standards-compliance mode.

McC · Post by **McC** » 2005-02-10 07:08pm

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

Dooey Jo · Post by **Dooey Jo** » 2005-02-11 07:32am

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...

McC · Post by **McC** » 2005-02-11 11:14am

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.

Mad · Post by **Mad** » 2005-02-11 11:15am

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.

McC · Post by **McC** » 2005-02-11 12:05pm

Doesn't work for me...I get the same problem.

CDS · Post by **CDS** » 2005-02-11 12:09pm

IE generally sucks for CSS - I wonder how many times I've told people to GET FIREFOX!!!

Mad · Post by **Mad** » 2005-02-11 02:11pm

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.

McC · Post by **McC** » 2005-02-11 02:56pm

Yeah, it works there...

Mad · Post by **Mad** » 2005-02-11 03:02pm

McC wrote:Yeah, it works there...

What's the modified code (HTML, CSS) of yours that isn't working?