By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,871 Members | 2,304 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,871 IT Pros & Developers. It's quick & easy.

position: absolute

P: n/a
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?
How can I do it right?

Regards,
André

Oct 31 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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).
In FF I get

img img img
img img

isn't that what you intended?
Why? Because I put a block element into an inline element?
Putting div inside span is dodgy HTML.
How can I do it right?
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.
Oct 31 '06 #2

P: n/a
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.
Oct 31 '06 #3

P: n/a
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é
Ben C wrote:
On 2006-10-31, André*ˆä®³el <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).

In FF I get

img img img
img img

isn't that what you intended?
Why? Because I put a block element into an inline element?

Putting div inside span is dodgy HTML.
How can I do it right?

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.
Oct 31 '06 #4

P: n/a
On 2006-10-31, André Hänsel <an***@webkr.dewrote:
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.
Oct 31 '06 #5

P: n/a
Hey,

both of your suggestions do exactly what you predicted - perfectly. :)

Thank you,
André

Ben C wrote:
On 2006-10-31, André*ˆä®³el <an***@webkr.dewrote:
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.
Nov 2 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.