Stylesheets - position: absolute

Author

position: absolute

André Hänsel

2006-11-05, 11:33 pm

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=3D"firstlevelitem">
<a><img></a>
</span>
<span class=3D"firstlevelitem">
<a><img></a>
<div id=3D"secondlevel">
<a><img></a>
<a><img></a>
</div>
</span>
<span class=3D"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?
How can I do it right?

Regards,
Andr=E9

Ben C

2006-11-05, 11:33 pm

Ben C

2006-11-05, 11:33 pm

On 2006-10-31, André Hänsel <andre@webkr.de> wrote:
> 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.

2006-11-05, 11:33 pm

Hi,

I made a test case which you can get under
http://kundenweb.creations.de/usenet/index.zip.

In FF it looks like http://kundenweb.creations.de/usenet/ff.jpg and in
IE it looks like http://kundenweb.creations.de/usenet/ie.jpg.

It should be like in IE but the "D" of "Die gesamte Show" should be
under the "B" of "Buchbar".

Regards,
Andr=C3=A9

Ben C wrote:
> On 2006-10-31, Andr=E9=A0=88=E4=AE=B3el <andre@webkr.de> wrote:
>
> In FF I get
>
> img img img
> img img
>
> isn't that what you intended?
>
>
> Putting div inside span is dodgy HTML.
>
>
> The good news is CSS itself can perfectly well handle display: block
> nested inside display: inline (technically what happens is you get
> "anonymous block boxes"). So just replace span with div, and add
> display: inline to the selector for .firstlevelitem. That may make some
> browsers better behaved.

Ben C

2006-11-05, 11:33 pm

On 2006-10-31, André Hänsel <andre@webkr.de> wrote:
> Hi,
>
> I made a test case which you can get under
> http://kundenweb.creations.de/usenet/index.zip.
>
> In FF it looks like http://kundenweb.creations.de/usenet/ff.jpg and in
> IE it looks like http://kundenweb.creations.de/usenet/ie.jpg.
>
> It should be like in IE but the "D" of "Die gesamte Show" should be
> under the "B" of "Buchbar".

Try adding left: 0px to #menu2 (as suggested in earlier post) to save
the UA guessing the static position.

Also always use the strict doctype for IE which is I think this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

Put it very first thing in the file, before <html>

So much for the horizontal position. If that doesn't work in IE after
you've tried those two things, then you're up against IE bugs and I
can't help you.

The differences in vertical position of "Die gesamte Showcase" etc. look
like they're to do with different placing of the top edge of the inline
box of "Buchbar" (that's the position that "Die gesamte" is offset by
42px from).

Where exactly the top edge of an inline box goes is something that's
also specified with some flexibility. So one would expect some variation
between browsers. I said in an earlier post that I thought Opera was
"right" and FF "wrong". I take that back. They're legitimately
different on this.

To get finer control, the best thing I can think of is to make .menuitem
float: left instead of display: inline. Then each menuitem is actually a
block box, with its top edge in a much more clearly specified place.