Thursday, September 21, 2006

IE disregards </li> (list closing tags)

I’ve been making modified Suckerfish (and Son of Suckerfish) Drop-Down Menus with background colours and border separated. The trouble is IE ignores closing list tags, meaning the carriage return in the HTML gets rendered as a space between the list items (below the bottom border of my list element). This tiny gap makes me nuts. The only way to get rid of it is to close the gaps in the HTML between </li> and the next <li> or </ul>.

So instead of this easy-to-read markup:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

… you need to make it:
<ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>

This person has a JavaScript for removing the white space, but it didn’t work for me. I’ll have to crack open the JavaScript text to figure out why not.

2 Comments:

Blogger Wiktor said...

You can use vertical-align: bottom on li elements to solve the problem.

More info: http://phonophunk.com/articles/ie-fix-for-gaps-between-list-items.php

Mon Oct 02, 08:24:00 AM 2006  
Blogger µ said...

Thanks for the tip. I haven’t tried this, but I also discovered another solution: setting

li { float: left; clear: left; }

works great.

Thu Oct 26, 04:39:00 PM 2006  

Post a Comment

Links to this post:

Create a Link

<< Home