Unwanted word wrapping in some browsers - why is this rendered differently?

Question

I'm having problems with the menus of a site I'm developing. Here's what the menus look like in different browsers.

Chrome 5

Opera 10

Firefox 4 Beta 2

Internet Explorer 8

The menu looks okay in Chrome, but in some browsers the little arrow is wrapped onto the next line. Additionally, in Firefox and IE the menu item overlaps with the arrow. How do I fix this?

You can find the stylesheet, HTML sources and all that jazz here: http://labs.pieterdedecker.be/vspwpg/

Answer 1

It's because of the float: right in the span behind the menu item with the double arrow in it (class sf-sub-indicator). Floating it will allow the contents to overlap the way they do now, because it takes the element out of the flow.

You'll find the theory behind floating elements here: http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Answer 2

hmmm what if you change your span for the little arrows " >> " to this

ul#menu > li > ul > li a > span.sf-sub-indicator {
margin-left:5px;
position:absolute;
right:5px;
}

and you add more padding-right to the li

ul#menu > li > ul li {
...
padding-right:20px;
...
}

it works in FF, but i'm not sure for the others

Answer 3

in file style.css add width:100% in ul#menu > li > ul li