display:block adding extra space in IE

[dee2005]

#leftSide{float:left; width:300px; border:1px solid #CFC2C2;}
#leftSide p{margin-top:60px; text-align:center; font-size:110%; font-weight:bold;}
ul#navbar{float:left; margin-top:70px; padding:0; width:300px;}

#navbar li{list-style-type:none; font-size:0.9em; font-weight:bold;text-transform:uppercase;}
#navbar li a {text-decoration:none; color:#4F4F4F; display:block; text-align:center}
#navbar a:hover{background-color:#E5E5E5; text-decoration:none;}

I am trying to create a vertical navigation list, but for some strange reason when the display:block is added in the <a>, IE6 produces extra spacing between each <li> tag. can any one help.

 

[BillyRayPreachersSon]

Try removing all whilespace inbetween your open UL and close UL.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[dmacster]

See this from projectseven.com uberlink

browser bugs and workarounds (pc only)

If you've followed along, built your own menu, and tested it in MSIE6, you know that there is a problem: the entire link box is not hot or clickable - only the text is. And if you've tested in MSIE 5, there is another problem. There are vertical gaps between each link. We can fix both of these issues quite easily. However, the CSS workarounds will cause problems if not specifically targeted at the browsers that need them. To do so, you'll use IE-PC Conditional Comments to target specific curative CSS rules at IE5x and IE6x.

The first rule targets IE5x and fixes the "clickable box" issue and the vertical gap as well.

<!--[if IE 5]>
<style>
#navlist a {
height: 1em;
float: left;
clear: both;
width: 100%;
}
</style>
<![endif]-->
The second rule targets IE6x and fixes the link box so that the entire box is "clickable":

<!--[if IE 6]>
<style>
#navlist a {height: 1em;}
</style>
<![endif]-->
Place the entire comment and its contents just before the closing </head> tag in your document to ensure it comes after the main style sheet. The version vector in the opening comment tag: if IE 6 targets all versions that begin with "6" - from 6.0 up to and including 6.99 (if there were such a release).

Place the second comment and its contents just after the first one. The version vector in the opening comment tag: [if IE 5] targets all versions that begin with "5" - from 5.0 up to and including 5.99.

Note: Conditional comments can also contain linked style sheets. In fact, they can contain just about anything. To learn more about them, see the MSDN web site.

 

[dee2005]

Thanks guys I have tried it and works

 

[BillyRayPreachersSon]

For others that may have the same problem as you, and find this thread via a search, can you clarify which of the two solutions you mean by "it", so that they don't have to try both to find out?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[dmacster]

Good point, Dan! I can confuse myself without assistance.

 

[BillyRayPreachersSon]

Dee?



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]