04 Jun 2009 @ 5:02 PM

Hello again

Did you know that IE6(and only IE6, IE7+ doesnt have this issue) has a weird UL/OL bug ?

If not read on

Lets say you want to make a vertical list of items that are linkedable like this

<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>

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, and the most basic method of it all is to write those links as follow:

<ul>
<li><a href="#">Item 1</a></li><li>
<a href="#">Item 2</a></li><li>
<a href="#">Item 3</a></li><li>
<a href="#">Item 4</a></li></ul>

The “wonders” of IE6 …

If you have questions, post them in the comments and i will answer as soon as possible

Tags

Tags: , ,

Categories: IE6 Bugs, XHTML/CSS

Posted By: Dinulescu Alexandru Adrian

Last Edit: 07 Jan 2010 @ 11:33 PM

EmailPermalink

Responses to this post » (One Total)

You could also fix this by Floating or everything else which gives
the Lists hasLayout

Cheers,
Martin

You must be logged in to post a comment.