'CSS Tutorials'

IE6 UL / OL Bug

7 JAN 2011 0

Hello again!

Did you know that IE6 (and only IE6, IE7+ doesn't have this issue) has a weird UL/OL bug ? This can be quite an issue, though not as much nowadays since people use IE8 and such, but it can be an issue for graceful degradation of your website.

Let's say you want to make a vertical list of items that are linked-able like this:

ul li a { display: block; line-height: 14px; font-size: 10px;}

In all browsers except IE6, the list will look OK, however IE6 has a peculiar thing -- because you press ENTER and you put the list items each on a new row, somehow IE6 interprets that space as a white line, and you will end up with THIS:

IE6 HORRORS

THE HORROR!!!!...

Well, there are multiple ways to fix this issue, from involving Huge javascript codes to doing some very basic things. The most basic method of all is to write those links as follows:

The "wonders" of IE6 ...

If you have questions, post them in the comments and I will be happy to answer them.

Fill out the form below to get started

find out what we can do for you 877 543 3110