Forum Moderators: not2easy
Example:
before:
<div id="content"> ... stuff </div>
after:
<div id="foo"><div id="content"> ... stuff </div></div>
css (for both)
#content {border:1px solid #00FF00; background-color:#00FF00;}
In the before version, I see the border and background color on the 'content' div, but in the after version, the border and background on #content have no effect (margin seems to continue working). I tried putting the styles inline and they still do not work when the 'foo' div is present.
Why is this?
The reason:
The id of the wrapper div is actually a Dreamweaver template variable -- <div id="@@(SectionName)@@> This way I would be able to specify common formatting for the content area...
#content {this and that...}
and also override formatting for a particular section on my site...
#Products #content {color:blue;}
I am not using both class and id for this because there are actually several layers -- Section->SubSection->Page
--BobG
W3C HTML Validator [validator.w3.org]
W3C CSS Validator [jigsaw.w3.org]
Next I made a minimal test page and it works fine.
So now I am copying code from the problem page to the test page a little at a time until it breaks.
I just wanted to give an update that you guys have put me on the right path.
--BobG
On the test page 'hello' should have a green background because of the #foo style, but the presence of div "myid" around the div "foo" causes the foo formating not to be applied.
This only happens when the div are inside a relative positioned div ('layout' in this example) *with* a width specified.
There are several work arounds.
1) if either "myid" or "foo" have "position:relative" the problem goes away.
2) if you put any comment before div "myid" the problem goes away!
Wierd stuff.
--BobG
---------------- cut ------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>IE Parse Bug?</title>
<style type="text/css">
#layout
{
position:relative;
width:800px;
}
#foo {background-color:#00CC00;}
</style>
</head>
<body>
<div id="layout">
<div id="myid">
<div id="foo">hello</div>
</div>
</div>
</body>
</html>
---------------- cut ------------------------
No idea why it is happening tho.
