articles:

double spaced IE list items

Recently I was using an unordered list to create vertical navigation. Fairly standard stuff. Building and testing in Firefox and everything seemed dandy. Tested in IE and I had suddenly acquired doubled spacing. See the screen shots below for an illustration.

Firefox
Firefox screen shot
Internet Explorer
Internet explorer screen shot


Here is the 'offending' code,  note it is 100% valid html and css (excuse the # in the hrefs):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
a{display:block; padding:2px; background-color:#CCCCCC; border-bottom:1px solid #999999; font-family:arial; font-size:0.8em }
</style>
</head>

<body>
<div style="width:25%">
<ul>
<li><a href="#">list item 1</a></li>
<li><a href="#">list item 2</a></li>
<li><a href="#">list item 3</a></li>
<li><a href="#">list item 4</a></li>
</ul>
</div>
</body>
</html>


Can you spot anything wrong?

If you can I would really appreciate an email detailing what it is.

The fix (or hack which ever term you prefer):
Well you have two options, either remove all the white space inbetween the <li></li> tags or, and rather bizarrely, add a trailing space to the text inside the link.

So you can either have:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
a{display:block; padding:2px; background-color:#CCCCCC; border-bottom:1px solid #999999; font-family:arial; font-size:0.8em }
</style>
</head>

<body>
<div style="width:25%">
<ul>
  <li><a href="#">list item 1</a></li><li><a href="#">list item 2</a></li><li><a href="#">list item 3</a></li><li><a href="#">list item 4</a></li>
</ul>
</div>
</body>
</html>
Or you can have:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
a{display:block; padding:2px; background-color:#CCCCCC; border-bottom:1px solid #999999; font-family:arial; font-size:0.8em }
</style>
</head>

<body>
<div style="width:25%">
<ul>
  <li><a href="#">list item 1 </a></li>
  <li><a href="#">list item 2 </a></li>
  <li><a href="#">list item 3 </a></li>
  <li><a href="#">list item 4 </a></li>
</ul>
</div>
</body>
</html>
Notice the space after the 1,2,3,4.

Here is the fixed list:
image showing list now without extra spacing

Post a comment

name:
(optional)

email:
(optional)

comment: