Log in

View Full Version : Resolved 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



<!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:

<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>
Skinnybobb
11-18-2008, 02:52 PM
Cheers Snookerman that did the trick :)
Snookerman
11-18-2008, 04:09 PM
You're welcome! To make it clear that the issue has been resolved, you can edit your first post and ad the Resolved prefix to this thread.