Menu misbehaving when description wraps

Different problems in IE6 and FF1.5

[itKiwi]

I have a simple vertical menu (no flyouts) made up of list items like
<li><a class="nav" href="index.php?MainPage=hsemail" title="email">Email Us</a></li>
The style is
#left {position:fixed; left:0; top:0; height:100%; width:200px;
background:#abc; background-position:0 100px;
font-size:1em; color:#fff; z-index:4;}

However, when the on-screen description is too long, so that it wraps onto two lines, two things happen.
1.IE6 has the bullet point for this item at the start of the second line, which I think is confusing.
2.FF 1.5 overlays the second line with the item under this “long” item, so that I have the two descriptions occupying the same line space. Very bad.

How can I solve this? (I can't be the first one to encounter this problem!)
I could remove the bullet points altogether, but the client prefers to keep them.
I have tried a <br /> at the end of the line with the long description. This works quite well in FF, though the line spacings are not the best (I could live with this), but IE adds a blank line, which looks really bad.

Thanks for any ideas you have.

[SuzyUK]

I think we would need to see the CSS for the <ul> and <li>, I take it #left is just the main container for all left content?

Is there perhaps a line-height/ fixed height on the <li>? it sounds like IE is expanding a height restriction and moving the bullet accordingly, (it's wrong, incorrect behaviour) and FireFox is being correct and overflowing the <li>.

Some code should be able to help us figure out more.

Suzy

[itKiwi]

Here is the rest of the menu related part of the style sheet.

a.nav, a.nav:visited {display:block; width:100px; height:25px; text-decoration:none; color:#fff; font-weight:bold; line-height:25px;}

I've had a bit of a play with the heights, and this certainly has an effect. But playing with the heights offsets the bullets from the description in IE. It's obviously not a simple problem/solution.

Thanks again.

[SuzyUK]

yeuchhh, haven't come across this one for ages and it's still present in IE7,

It's not a simple one, and you have a choice of which workaround is easiest for you

Removing the height fixes the overlap problem in FF.

Bullet problems:
It is hasLayout related, but the fix for one problem causes another.

The height and/or width on the <a> is triggering hasLayout which causes the bullet to move to the bottom in IE. So firstly some way of removing the height and width from them is the way to go, however I also discovered that setting the height or width on the UL, or LI caused the bullets to disappear altogether :o so wrapping the entire UL in a div was the closest I could get, with a bit of fickering you can get your links to be 100px wide..

e.g.

.nav {width: 130px; background: #abc;}
.nav ul {background: #ffe; padding: 0; margin: 0 0 0 30px;}
/* list margin is the area for the bullet and that subtracted from the div width leaves 100px for the links */

.nav a {
display:block;
/*width:100%;*/
min-height:25px;
text-decoration:none;
color:#f00;
font-weight:bold;
line-height:25px;
}

.nav a:hover {
color:#000;
}

HTML:
<div class="nav">
<ul>
<li><a href="/" title="email">1. Email Us</a></li>
<li><a href="/" title="email">2. Email Us</a></li>
<li><a href="/" title="email">3. A longer link .. more text</a></li>
<li><a href="/" title="email">4. Email Us</a></li>
</ul>
</div>

This solution unfortunately triggers the other one, that of "white space in lists" - it adds an extra line between the list items, AND it means the display block portion of the link won't work

the white space can be cured, usually I would do it using floats, but that again triggers hasLayout, so you can do it using my least favourite solution. You have to physically remove the whitespace between the </li><li> in the HTML
e.g.

<li><a href="/" title="email">1. Email Us</a></li><
li><a href="/" title="email">2. Email Us</a></li><
li><a href="/" title="email">3. A longer link .. more text</a></li><
li><a href="/" title="email">4. Email Us</a></li>

However there is no way to cure the display: block; problem {where the entire rectangle area of link should be hoverable) without setting hasLayout, which will bring you back to the start again, So using the above will mean you haven't got 100% hoverable links in IE.

All in all, In this case I would be inclined to remove the bullets from the list using list-style: none; Then you will be able to use width and heights again. Replace the bullets with a background image of a bullet instead if the customer likes them, is this a possibility?

Like I said.. yeuuuchhh

Suzy

[itKiwi]

Thanks Suzy,

I took the easy option; no bullets, and the nav class style you suggested. If the customer insists on the bullets, I'll try the gifs later.

I didn't really understand your suggestion to "physically remove the whitespace between the </li><li> in the HTML". The HTML you included only gave me some "< li>" text in the blank lines. However, I found a solution you wrote in a tanfa menu tutorial, which works (2 lines in the stylesheet).

I don't see a problem with the display:block not working properly.

Thanks again for your help. As you said, "yeuuuchhh", for something which should be so simple!
Alan

[Ingolemo]

The example she gave you should have been more like this:

<li><a href="/" title="email">1. Email Us</a></li><li
><a href="/" title="email">2. Email Us</a></li><li
><a href="/" title="email">3. A longer link .. more text</a></li><li
><a href="/" title="email">4. Email Us</a></li>

[itKiwi]

Thanks Ingolemo.
It worked a treat. Is there a reason for this, or is it another example of bad IE behaviour which helps us.
Ciao, Alan

[SuzyUK]

>> The example she gave you should have been more like this:

Well spotted Ingolemo, thanks for the correction ;)

itKiwi, It's IE bad behaviour, it shouldn't actually be treating whitespace between closing and opening tags as physical space. But it does in lists (when display block is used inside them) and also it does sometimes in certain float scenarios. Who knows why..

You can just join up the whole list too
like
<li><a href="/" title="email">1. Email Us</a></li><li><a href="/" title="email">2. Email Us</a></li><li><a href="/" title="email">3. A longer link .. more text</a></li><li><a href="/" title="email">4. Email Us</a></li>

which is how I had it originally, and why I landed up putting the breaks in the wrong place, the breaks are considered by some to make the list easier to maintain, but there ya go

If you're going with the "no bullets" solution you shouldn't need the HTML solution above you should then be able to use floats - is that the solution you found on my site?

Suzy

[itKiwi]

The solution I found was

#left ul li {float:left; width:100%;}
#left ul li a {height:1%}

I'll stick with what's working now, and remember the floats if something funny happens again in the future.

Thanks everyone. On to the next problem ;-)