Stylesheets - CSS Menu Rendering Problem in Opera

Author

CSS Menu Rendering Problem in Opera

Lachlan Hunt

2004-08-24, 4:16 am

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 abuse@127.0.0.1
Thank you.

Frostillicus

2004-08-24, 4:16 am

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

2004-08-24, 4:16 am

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 abuse@127.0.0.1
Thank you.

Els

2004-08-26, 12:27 pm

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 -

Els

2004-08-26, 12:28 pm

Lachlan Hunt wrote:

> Els wrote:
>
>
> 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

2004-08-26, 12:28 pm

Brian wrote:
>
> Strange.
>
>
> As have I, with the error that the stylesheet was applied after a mime
> fix. Perhaps this is a "quirks" v. "standards" mode thing.

Yep, that it. I just did another test, and it applies it when in Quirks
Mode, but not when in Standards, or Almost Standards Mode.

>
> As long as you're in communication with Him, perhaps you could ask him
> to smite IE when he has a moment? :-)

Perhaps I'm just tired, since it's 04:00 here and I'm watching the
Olympics, but I couldn't stop laughing at that. I'll see what do
though. :-D

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

Please direct all spam to abuse@127.0.0.1
Thank you.

Lachlan Hunt

2004-08-26, 12:28 pm

Els wrote:

> Lachlan Hunt wrote:
>
>
> 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 abuse@127.0.0.1
Thank you.