Horizontal menus

[FunkyRes]

Need help with this.
How bad it happens actually depends upon the machine - identical build of firefox on my desktop isn't as bad as on my laptop (both running same OS - but I think I have different preferred fonts and sizes)

here's the menu:

http://www.shastaherps.org/SpeciesList

Put the mouse over Snakes.
Notice how Garter Snakes floats up next to Boas.
I can use non breaking spaces to fix it but that messes up the hover effect (aesthetically anyway, still functions fine).

Is there a cross browser way to do that kins of menu list where list items can be radically different?

The CSS that does it:

http://www.shastaherps.org/css/layout.css

way down towards the bottom - the #pagenav stuff

Any suggestions appreciated.

[fragebot]

Hi Funky,

Apparently Garter Snakes floats up to where Boas is because of the float left instruction in your CSS tag for that element. You must remove that tag for the vertical alignment you desire. Do not use non breaking spaces for this, the first line will be positioned strangely due to this.

The cross browser issues are due to IE hover issues: you could resolve this by identifying the list element by id and changing its visibility through Javascript using the mouseover and mouseout events. I'm not sure about a way to do this in CSS, but I am sure of the other way.

--Russell