Vertical Nav spacing bug

**Skinnybobb** · 11-07-2008, 08:50 AM

Hiya all,
Can someone put me out of my misery and point out what i'm missing.
Nav menu renders great in ie7 but has huge gaps in ie6, what's wrong?
(I'm not interested if it's not correct in any other browser, I just need to get it going in ie6 and 7).
I don't have a link as it's behind a firewall.
Any help greatly appreciated.
Mark

HTML Code:

<!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=windows-1252" />
<title>Nav</title>
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
font: 76% Arial, Helvetica, sans-serif;
background: #f4f4f4;
}

.menuright {
color: #ffffff;
float: right;
width: 94px;
background-color: #1d6fab;
margin: 0;
padding: 5px;
font-size: 0.9em;
line-height: 1.5em;
}

#menuright1 {
	float: right;
	display: table;
	font-size: 0.9em;
	background: #1d6fab;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 9.5em;
}
#menuright1 li {
	margin: 1px 0;
	padding: 0;
}
#menuright1 a {
	background: #1c96c7;
	border-bottom: 0px solid #393939;
	color: #ffffff;
	display: block;
	margin: 0;
	padding: 0px 4px;
	text-decoration: none;
	font-weight:bold;
}
#menuright1 a:hover {
	background: #ffffff;
	color: #1c96c7;
	padding: 0px 4px;
}          


</style>
</head>

<body>
<div class="menuright">

<ul id="menuright1">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>
</body>

</html>

**Snookerman** · 11-07-2008, 12:53 PM

I think that is known as the IE white space bug. If I remember correctly you should just put a space at the end of every anchor like so:

Code:

<ul id="menuright1">
    <li><a href="#">Link </a></li>
    <li><a href="#">Link </a></li>
    <li><a href="#">Link </a></li>
    <li><a href="#">Link </a></li>
    <li><a href="#">Link </a></li>
    <li><a href="#">Link </a></li>
</ul>