Original Post

With a little help, I managed to work around a common rendering issue with linked list items and Internet Explorer 5 and 6 for windows. I decided to document my findings with a short tutorial on styling unordered lists (ul).

Special thanks go to Michael Ryznar for his assistance.

The Rendering Bug

Without the necessary workaround, Internet Explorer 5 and 6 will add a large amount of white-space under linked list items. In most cases, this effect is undesirable.

Creating the Menu

First, let us create a basic, unordered list containing hyper linked text.

<ul>
<ul>
	<li><a href="">Item1</a></li>
	<li><a href="">Item2</a></li>
</ul>
</ul>

For the end product, we want to create a simple menu of two clickable blocks without any white space in between. So now, we will write a the corresponding CSS.

The first step is to get rid of the bullets in the unordered list (ul).

ul {
	list-style: none;
	margin: 0;
	padding: 0;

	border: 1px solid #555;
}

The list style property lets you customize the appearance of bullets. By declaring no values in this property, the display of bullets are eliminated. By giving margin-left a value of zero (for ie browsers) and padding-left a value of zero (for Gecko browsers), we eliminate the default indent of list items (li) in the unordered list.

In addition, I added a dark grey border for styling.

Next, we want to style the list items themselves.

li {
	display: inline;
	margin: 0;
	padding: 0;
}

By setting the display property to the value of inline, we work around a rendering issue in the windows version of Internet Explorer 5 and 6. In addition, the margin and padding are set to zero so that extra whitespace is not created between items.

Next, we want to make the links into solid boxes with the option of changing color on hover.

li a { /*/*/
	display: block;
	margin: 0;
	padding: 3px;

	text-decoration: none;

	background: #ddd;
/* */}

For linked elements we will be changing the display property to a value of block. Hyperlinks are normally defined as an inline element, but to make the element into a solid box, we need it to occupy an entire line. This is the purpose of display: block.

The margin is set to zero in order to eliminate whitespace between elements. I added 3 pixels of padding to give each element 3 pixels of spacing along the inside edge.

In addition, a background color was added for styling.

The most confusing elements in this section are the slashes and asterisks. /* This is how text is commented out in CSS. */ The particular pattern of slashes and asterisks prevents Netscape Navigator 4 from rendering this CSS. The browser has been prone to crashing when trying to render this element as a block.

The Workaround

To elaborate on the Internet Explorer workaround, we first need to set the display of the list items as inline. Then, the hyper link is set to display as a solid box through display: block. This method ensures that no extra whitespace displays in between the list items.

I had to research this workaround for a new project I am working on. I will be working with Northland College on web accessibility. I don't want to give away too many details about this project, but I will share the code used to produce one of the menus in the redevelopment. Hopefully this will show a real-world context of this workaround.

XHTML required for a menu:

<ul>
<ul>
<div class="qlink-title">

<h3><span>Quick Links »</span></h3>

<ul class="quicklinks">

<li><a href="#">About Northland</a></li>
<li><a href="#">Financial Aid</a></li>
<li><a href="#">Contact NC</a></li>
<li><a href="#">Check Email</a></li>
<li><a href="#">Site Map</a></li>
<li><a href="#">Northland Store Online</a></li>
<li><a href="#">Transcript Request</a></li>
<li><a href="#">Online Application</a></li>
<li><a href="#">The Bridge</a></li>

</ul>
</div>
</ul>
</ul>

CSS required for a menu:

div.qlink-title ul.quicklinks {
	list-style: none;

	margin-top: 3px;
	margin-left: 5px;
	margin-bottom: 0px;
	margin-right: 5px;

	padding-top: 2px;
	padding-left: 0px;
	padding-bottom: 0px;
	padding-right: 0px;

	font-family: "Verdana";
	font-size: 11px;
	font-weight: normal;

	color: #444422;
	background-color: #fff;

	border: 1px solid #aaaa88;
}

div.linklist ul.quicklinks li {
	display: inline;

	margin: 0px;
	padding: 0px;
}

div.linklist ul.quicklinks a {
	/*/*/display: block;

	margin: 0px;
	padding: 2px;

	height: 14px;

	text-decoration: none;

	color: #444422;
	background-color: #f5f3ea;

	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff; /* */
}

div.linklist ul.quicklinks a:hover {
	text-decoration: none;
	color: #444422;
	background-color: #DEDACA;
}