...

View Full Version : Nested ID's



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




#container{
margin: 0;
padding 0;
}

#content{
margin: 200px 20px 50px 210px;
}

...
...
...

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



And here is the page if you want to see the full page.
http://vangoessalon.com/test/

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.

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

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

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

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum