CSS Menu Rendering Problem in Opera

[Lachlan Hunt]

Hi,
I've been trying, but failing to work out what is causing Opera to
render my drop down menu incorrectly on my site.

http://www.lachy.id.au/

For some reason, there seems to be extra margin added below each list
item, that gets bigger for each subsequent item. Can someone please
take a look and see if they can find my problem? It works almost
perfectly in Firefox so you can see how it should look. It degrades
quite a lot in IE, there's only one hack in there to make it at least
readable.

The style sheet is:
http://www.lachy.id.au/lib/style/basic/coolblue
(It does validate, with the exception of -moz-border-radius which I'm
just experimenting with)

Finally, if someone could let me know how good or bad it looks in
Safari, that would be good too. But I'll fix those problems when I buy
my first Mac in a few weeks.

--
Lachlan Hunt
http://www.lachy.id.au/

Please direct all spam to ab***@127.0.0.1
Thank you.

[Frostillicus]

I don't have Opera installed (I'm a Firefox man) but your site looks good.
You're not wrong about it degrading horribly in IE :-)

Which town in central NSW are you from? I'm in Tamworth (and I don't like
country music, either ;-)

[Lachlan Hunt]

Frostillicus wrote:

I don't have Opera installed (I'm a Firefox man) but your site looks good.
Thank you.
You're not wrong about it degrading horribly in IE :-)
Yeah, I know. That's why I call it Internet Exploder ☺
Which town in central NSW are you from? I'm in Tamworth (and I don't like
country music, either ;-)

Well, it's off topic, but ok, I'm originally from Parkes, but have since
moved to Sydney for work.

--
Lachlan Hunt ☺
http://www.lachy.id.au/

Please direct all spam to ab***@127.0.0.1
Thank you.

[Els]

Lachlan Hunt wrote:

Hi,
I've been trying, but failing to work out what is
causing Opera to
render my drop down menu incorrectly on my site.

http://www.lachy.id.au/

For some reason, there seems to be extra margin added below
each list item, that gets bigger for each subsequent item.
Can someone please take a look and see if they can find my
problem?
Haven't looked at all the possibilities, but if you change:
#sitenav li { margin: 0; padding: 0; text-align: center;min-
height:100%;}
to:
#sitenav li { margin: 0; padding: 0; text-align: center;min-
height:40%;}
the problem seems to disappear (in my 'only the menu'-test).

Could well be that this has to do with one of the other
properties somewhere in the code though.
It works almost perfectly in Firefox so you can
see how it should look. It degrades quite a lot in IE,
there's only one hack in there to make it at least
readable.

In my IE6.0 WinXP, I get a 406 : Not accepted. My own local
copy does work however...
Could enhance it a tiny bit more by centering the page though
:-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Lachlan Hunt]

Els wrote:

Lachlan Hunt wrote:

...causing Opera to render my drop down menu incorrectly...

http://www.lachy.id.au/

... seems to be extra margin added below
each list item...

Haven't looked at all the possibilities, but if you change:
#sitenav li { ... min-height:100%;}
to:
#sitenav li { ... min-height:40%;}
the problem seems to disappear (in my 'only the menu'-test).

Thank you, that was essentially the problem. I ended up just taking it
out, and setting the height to 2em instead. The menu now works
perfectly well in Opera, though I can't work out how to get the text for
each menu item to be vertically centered within it's block without
adding supurflous <span>s to the mark up.

The method I was using that works in Firefox:

#sitenav li a { ... padding: .4em 0; line-height: 1.2em; }

which should add to 2em, thus vertically centering within a box that is
2em high, was being miscalculated by Opera due to what looks like a
rounding error, leaving a 1px gap between each menu item.

Oh well, unless someone can suggest another method, I'll just live with
it. I tried display: table; vertical-align: middle; but it caused other
problems.

--
Lachlan Hunt
http://www.lachy.id.au/

Please direct all spam to ab***@127.0.0.1
Thank you.

[Els]

Lachlan Hunt wrote:

Els wrote:

Lachlan Hunt wrote:

...causing Opera to render my drop down menu
incorrectly...

http://www.lachy.id.au/

... seems to be extra margin added below
each list item...

Haven't looked at all the possibilities, but if you
change: #sitenav li { ... min-height:100%;}
to:
#sitenav li { ... min-height:40%;}
the problem seems to disappear (in my 'only the
menu'-test).

Thank you, that was essentially the problem. I ended up
just taking it out, and setting the height to 2em instead.
The menu now works perfectly well in Opera, though I can't
work out how to get the text for each menu item to be
vertically centered within it's block without adding
supurflous <span>s to the mark up.

Setting the line-height to the same as the height I think.
The method I was using that works in Firefox:

#sitenav li a { ... padding: .4em 0; line-height: 1.2em; }

which should add to 2em, thus vertically centering within a
box that is 2em high,
Ah, you did that already :-)
was being miscalculated by Opera due
to what looks like a rounding error, leaving a 1px gap
between each menu item.

And what if you anticipate that error and put the line-height
to 2.1em? Or take the .4em padding out? If the line-height is
equal to the height, padding should be obsolete, I think?

What I don't get, actually, is what you are seeing in Opera.
I've just taken out the min-height:40% that I had in it, and
afaics the menu items are all vertically centered in their
respective little boxes:

http://locusmeus.com/temp/lachlan.html

(Opera 7.51)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Lachlan Hunt]

Els wrote:

... If the line-height is
equal to the height, padding should be obsolete, I think?
I didn't realise that was how line-height worked — it's one of those
properties that has always confused me. I made the change, the padding
is gone and line-height is now 2em and it works perfectly.
What I don't get, actually, is what you are seeing in Opera.
I've just taken out the min-height:40% that I had in it, and
afaics the menu items are all vertically centered in their
respective little boxes:

http://locusmeus.com/temp/lachlan.html

I thought I tried that, but it seemed to cause another strange bug
firefox. I guess I must have inadvertently made a syntax error or
something. I don't know what was causing the 1px gap in Opera, I
haven't been able to replicate it since.

Thanks again, it now works exactly the way I intended. I even figured
out how to fix the overlapping borders in Opera. So, except for the
unavoidable rounding error between the edges of the sidebar and menu,
it's all pixel-perfect in both Opera and Firefox... Safari's my next
problem, but that will have to wait until I get around to buying my
first Mac.

One thing I don't understand is what caused IE to change the way it was
rendering the menu? I had to update the IE hack so it didn't cover up
any content, but I guess it's a slight improvement for it anyway. If
you want to see what I mean, remove the width from the * html hack at
the end of the file. However, I think it's just one of those
unexplainable mysteries of the universe like nearly every other bug in IE.

--
Lachlan Hunt
http://www.lachy.id.au/

Please direct all spam to ab***@127.0.0.1
Thank you.

[Els]

Lachlan Hunt wrote:

One thing I don't understand is what caused IE to change
the way it was rendering the menu? I had to update the IE
hack so it didn't cover up any content, but I guess it's a
slight improvement for it anyway. If you want to see what
I mean, remove the width from the * html hack at the end of
the file. However, I think it's just one of those
unexplainable mysteries of the universe like nearly every
other bug in IE.

What I still don't get, is that I still get a 406 in IE...
Your server and my IE are in war or something? The local copy
"works" in IE. (on Apache 2.0.49.0 under WinXP)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Christina Aquilera - Get Mine, Get Yours

[Alan J. Flavell]

On Sat, 21 Aug 2004, Els wrote:

Lachlan Hunt wrote:

One thing I don't understand is what caused IE to change
the way it was rendering the menu?

(IE moves in wondrous ways...)
What I still don't get, is that I still get a 406 in IE...
Are you talking about http://www.lachy.id.au/ ?
Your server and my IE are in war or something?

That server is saying:

| Vary: negotiate,accep t

which indicates (at least if all is working to plan) that the answer
is to be sought in the Accept: header that you are presenting. (I.e
that any Accept-charset, Accept-language ... which might be presented
are not germane to the issue).

If I provoke a 406 from that server, its response headers include
this:

Server: Apache/1.3.26 (Unix) Debian GNU/Linux PHP/4.1.2
Alternates: {"index.html " 1 {type text/html} {language en-au}},
{"index.xhtm l" 1 {type application/xhtml+xml} {language en-au}}

which kind-of confirms that language isn't the issue, since
the only language variants available are all en-au. (This seems
to be working OK - that server is still returning the en-au variant
even if I tell it that I only accept Afrikaans.[1])

I think we need to know what Accept: header your IE is presenting
(can you find out?).

I know that mine presents this, without any interference on my part
(beyond having installed MS Office, I mean):

HTTP_ACCEPT = application/vnd.ms-excel, application/msword,
application/vnd.ms-powerpoint, image/gif, image/x-xbitmap, image/jpeg,
image/pjpeg, */*

which means that under the provisions of the wildcard (*/*) it is
willing to receive text/html -or- any of the various XHTML
content-types, even though IE has little idea what to do with those
when it gets them (some would say much the same about its reaction to
text/html, but I digress).

But that header can be doctored (I'm told, by those with a willingness
to go tinkering with the registry...). Possibly it also gets adjusted
by one or other "fix" from galactic HQ, I don't know.

cheers

[1] No special reason for choosing Afrikaans, except that it's right
at the top of the menu ;-)

[Els]

Alan J. Flavell wrote:

On Sat, 21 Aug 2004, Els wrote:

Lachlan Hunt wrote:

> One thing I don't understand is what caused IE to change
> the way it was rendering the menu?
(IE moves in wondrous ways...)

What I still don't get, is that I still get a 406 in IE...
Are you talking about http://www.lachy.id.au/ ?

Yes.
Your server and my IE are in war or something?

That server is saying:

| Vary: negotiate,accep t

which indicates (at least if all is working to plan) that
the answer is to be sought in the Accept: header that you
are presenting. (I.e that any Accept-charset,
Accept-language ... which might be presented are not
germane to the issue).

And how would I change that?
If I provoke a 406 from that server, its response headers
include this:

Server: Apache/1.3.26 (Unix) Debian GNU/Linux PHP/4.1.2
Alternates: {"index.html " 1 {type text/html} {language
en-au}}, {"index.xhtm l" 1 {type application/xhtml+xml}
{language en-au}}

which kind-of confirms that language isn't the issue, since
the only language variants available are all en-au. (This
seems to be working OK - that server is still returning the
en-au variant even if I tell it that I only accept
Afrikaans.[1])

I think we need to know what Accept: header your IE is
presenting (can you find out?).
How?
I know that mine presents this, without any interference on
my part (beyond having installed MS Office, I mean):

HTTP_ACCEPT = application/vnd.ms-excel, application/msword,
application/vnd.ms-powerpoint, image/gif, image/x-xbitmap,
image/jpeg, image/pjpeg, */*

which means that under the provisions of the wildcard (*/*)
it is willing to receive text/html -or- any of the various
XHTML content-types, even though IE has little idea what to
do with those when it gets them (some would say much the
same about its reaction to text/html, but I digress).
But this is the very first time I ever had a 406 from anywhere
in the world...
But that header can be doctored (I'm told, by those with a
willingness to go tinkering with the registry...).
Possibly it also gets adjusted by one or other "fix" from
galactic HQ, I don't know.

cheers

[1] No special reason for choosing Afrikaans, except that
it's right at the top of the menu ;-)

Plus I'd understand it ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Diana Ross & Supremes - Motown Hits medley