|
|
Posted by Jeff Dege on 08/03/07 15:30
I'm trying to lay out some divs that have content inserted via
javascript. Just because it's cleaner, I've been using self-closing div
elements: "<div />"
And I've been having the hardest time getting things to lay out cleanly.
What I've discovered makes no sense.
Consider the following bit of html:
<div id="first">
<div id="second">
<div id="third">
</div>
</div>
</div
And add CSS for these three IDs:
#first {
position:relative;
top:0px; left: 0px;
width:256px; height: 256px;
background-color:gray;
z-index:0;
}
#second {
position:absolute;
top:32px; left: 32px;
width:128px; height: 128px;
background-color:yellow;
z-index:1;
}
#third {
position:absolute;
bottom: 16px; right: 16px;
width:64px; height: 64px;
background-color:blue
z-index:2;
}
Everything draws exactly as you'd expect, a gray box with a yellow box
inside it, offset from the top left, and a blue box inside the yellow
box, offset from the bottom right.
Now try a second, slightly different, bit of html:
<div id="first">
<div id="second">
</div>
<div id="third">
</div>
</div
Because the third div is no longer contained within the second div, the
blue box now draws offset from the bottom right of the outer gray box.
Which is again, exactly as we'd expect.
Now try a third bit of html:
<div id="first">
<div id="second" />
<div id="third" />
</div
I'd expect this to draw exactly the same as the second example, above.
We've made no substantive changes from it. Instead, it draws the same as
the first - as if the third div is nested within the second div. Which
it isn't, according to everything I thought I understood about how SGML
parsing worked.
But I've tried this in EI6, and I've tried it in Firefox 2.0, and both
render this the same way. I've looked at it in Firefox's DOM Inspector,
and according to that, the third div _is_ being parsed as being contained
with the second div.
Does this make any sense at all?
Can anyone explain to me why this works this way?
--
There are three kinds of men. The one that learns by reading. The few
who learn by observation. The rest of them have to pee on the electric
fence for themselves.
- Will Rogers
Navigation:
[Reply to this message]
|