On 2006-10-31, André Hänsel <an***@webkr.dewrote:
Hi,
I want to make a horizontal navigation with the second level beneath
the first level.
The items of the second level shall appear left aligned with their
corresponding first level item. To visualize it:
Entry1 Entry2 Entry3 Entry4
Entry3.1 Entry3.2 Entry3.3
The CMS always displays only the second level menu of the active first
level item.
At the moment I have the following structure (the second first level
item is active):
<span class="firstlevelitem">
<a><img></a>
</span>
<span class="firstlevelitem">
<a><img></a>
<div id="secondlevel">
<a><img></a>
<a><img></a>
</div>
</span>
<span class="firstlevelitem">
<a><img></a>
</span>
My stylesheet:
.firstlevelitem
{
position: relative;
}
#secondlevel
{
position: absolute;
top: 40px;
}
But this does not work. In IE the second level menu starts at that
horizontal position where the corresponding first level item _ends_ and
in FF the second level menu is in a position that I don't understand at
all (shifted to the right).
Why? Because I put a block element into an inline element?
I had a look at this in Opera as well, where the situation is different
from that in Firefox.
The secondlevel div's containing block is the firstlevelitem it is
nested inside. It should be 40px from the top of that block.
FF puts it too low (I'm using my own image, however, which is probably a
different size from yours, so YMMV).
Opera puts it in the right place, vertically.
The much harder question for the UA, though, is what to use for the
computed value of "left" for the secondlevel div.
Because it's "auto" it should use the "static" position, which is
roughly where the image would have gone had it not been positioned.
The spec does however say, "But rather than actually calculating the
dimensions of that hypothetical box, user agents are free to make a
guess at its probable position." (See section 10.3.7 of CSS 2.1)
In this case this is particularly hard because had the box not been
positioned, things would have flowed quite differently. The box would
have created an anonymous block box and gone below and to the left, so
arguably both Opera and FF are wrong to indent it from the left at all.
But the spec does say they can "make a guess", which they have done.
We are in a horribly grey area here, but it can easily be avoided. Just
add left: 0px to your selector for #secondlevel. This makes the UA's job
a lot easier because it doesn't have to guess at that static position,
and hopefully you'll get more consistent results across browsers.
