Tuesday, September 16, 2008

Firefox issue with wrapping in horizontal menu

So I've been trying to make some modifications to a style sheet to get around some funny mapping that is happening when the items get too long. Unfortunately the CSS has gotten pretty complex and looks like it could stand for some refactoring, but I was able to distill out something that I didn't expect for behavior from firefox. Here's what is happening with the menu wrapping that just isn't right:



Then menu consists of an unordered list and list items that each contain a sublist. The quirk of this menu that I'm not used to seeing is the list items for the main menu are organized using display: inline and white-space: nowrap. As it turns out the offending line was in the html file.

<li class="mi-top">
Third Menu

Once I remove any white space from between the > and the "T" everything is fine. My understanding is that it should ignore any line feeds inside of the li tag. I'm going to switch this over to using floats instead of display: inline to see if that will take care of the issue as well.

9/17/2008 - Float followup: Floats took care of it without having to worry about the white space.

No comments: