View Full Version : Nested ID's

12-12-2007, 01:15 AM
Why does the following not work in IE (it works fine in firefox)

margin: 0;
padding 0;

margin: 200px 20px 50px 210px;


<div id="container">
<div id="content">Bla Bla Bla</div>
bla bla bla

And here is the page if you want to see the full page.

In firefox this works as I expected, the outer div had no margin or padding. While the inner div had the specified margins.

BUT in IE(both 6 and 7), the inner div has margins of 0. Removing the margin declaration for #container fixes the problem, but the issue remains why am I unable to override the element's parents' css.

12-12-2007, 01:43 AM
For one it may help if you remove the XML declaration at the top that is putting IE into quirks mode. The doctype should be the first thing in the document.

I can’t imagine why it shouldn’t work in IE, though. Could it be collapsing margins? Nah, don’t think so…

See what removing the XML line does.

12-12-2007, 02:42 AM
I removed the xml. Still no go.....

12-12-2007, 03:13 PM
I removed the xml. Still no go.....

It does seem to be a collapsing margin issue.

Changing #container to:
padding: 1px;
margin: -2px;
width: 100%;

fixed the problem. The key was the width, with out width declaration it collapsed the margin in IE. I don't fully understand why the width was required in IE, but I'm moving on.

12-12-2007, 03:27 PM
Probably an issue due to which IE always causes problems: hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html)