ansaurus

Question

CSS UL Menu in IE 6

Answer 1

+1 A:

I don't have a solution to the main issue, but you could change your code formatting to look nicer and still work in IE 6.

<div class="nMenu">
    <ul>
        <li><a href="">One</a></li
        ><li><a href="">Two</a></li
        ><li><a href="">Three</a></li
        ><li><a href="">Four</a></li
        ><li><a href="">Five</a></li>
    </ul>                                           
</div>

David Kolar 2009-02-03 15:49:00

Interesting approach - wonder if whitespace inside tags is accepted by the W3C validator.

Ross 2009-02-03 15:50:30

This is an interesting approach, and while potentially more readable, I would say it is less maintainable. I would rather see no carriage returns I think.

Ryan Guill 2009-02-03 15:59:20

Yes, it is certainly less than ideal, but then again so is dealing with IE 6. ;)

David Kolar 2009-02-03 16:05:13

Answer 2

A:

Try adding overflow: hidden; to .nMenu li.

Ross 2009-02-03 15:49:58

I want to make sure I understood you right, I added:.nMenu li{ overflow: hidden;}to my css at the top. But this doesn't seem to change anything in IE6. Did I misunderstand?

Ryan Guill 2009-02-03 15:58:03

That's what I meant, but strange it didn't work. Try adding it to the a instead.

Ross 2009-02-03 16:00:36

same thing when adding it to the a.

Ryan Guill 2009-02-03 16:02:01

Answer 3

+5 A:

Apply display: block; to the li, tell IE6 to make the a 100% in width, and tell all browsers to display the a as a block instead.

.nMenu li {
    display: block;
}

/* hack for IE6 */
* html .nMenu a 
{
    width: 100%
}

.nMenu a {
    display: block;
    padding: 3px 0px 3px 5px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    font-weight:bold;
    text-decoration:none;
}

Tried it in IE6 and both lists look identical, and renders exactly the same in Firefox.

baxter 2009-02-03 15:57:10

This works to remove the extra whitespace above and below, but does not put the background-color on the entire row on hover like it does when the class is applied to the <a>.

Ryan Guill 2009-02-03 16:01:20

Applying display:block to a split li element for IE into two parts: link block and empty text element, one on top of another. With block applied to li, you have block around your link followed by an empty text.

buti-oxa 2009-02-03 16:03:51

Not sure what you mean buti-oxa. Could you provide an example?Ryan, I've corrected my example above, hopefully this should do the trick. You can replace my IE6 hack with any IE6 hack :)

baxter 2009-02-03 16:12:33

I just explained why *your* solution works. (I was afraid it looks like magic to a reader.) MS Developer Toolbar showed me what IE "had in mind".

buti-oxa 2009-02-03 16:17:19

Ah, hehe, I misunderstood you ;) thanks for the explanation!

baxter 2009-02-03 16:20:01

Yes, this solution works perfectly.

Ryan Guill 2009-02-04 13:06:29

ansaurus

tags:

views:

answers:

CSS UL Menu in IE 6

related questions