Block-level links in <li>'s

If you try the following code, it will work well in Mozilla. Unfortunately, IE puts a block-level space between each <li>. Is there any way to get the proper (Mozilla) effect in IE, without resorting to putting each link in a separate table cell?

The idea is to get a side navigation bar of links, each stacked directly on top of the other, all 200px wide, with each link being set to display:block so the full 200px is clickable.

Here's the code:

<html> <head> 
<title>Stacked Side-Nav Bar</title> 
<style type="text/css"> 
#sidenav {background-color: #cee1f0; border: 1px solid #334dac; color: #334dac; width: 200px; position: relative;} 
ul, li {margin: 0; padding: 0; list-style-type: none;} 
a:link, a:visited {display: block; color: #334dac;} 
a:hover, a:active {color: #ffffff; background-color: #334dac;} 
</style> 
</head> 
<body> 
<div id="sidenav"> 
<ul id="navbar"> 
<li><a href="#">Home</a></li> 
<li><a href="#">My Profile</a></li> 
<li><a href="#">My Membership</a></li> 
<li><a href="#">Articles</a></li> 
<li><a href="#">Free Newsletter</a></li> 
<li><a href="#">Support</a></li> 
</ul> 
</div> 
</body> 
</html>

Block-level links in <li>'s

Making it work in IE

MatthewHSE

iamlost

aevea

dcrombie

isitreal

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week