IE7 & extra space in li with block display

[amars1983]

I'm doing a navigation bar with css and for some reason on my bar when I add display block to the link in the list item when hovered over, in IE7 it adds extra spacing below the list item. I do the display block so that the link spreads the width of the list item. Here is the css:

#navbar li:hover a {
	color:#000;
	display:block;
}

Any thoughts on what I'm doing wrong.

[Camron467]

if you have display:block; in the non hover nav bar, you do not need it in the [ICODE]a:hover[ICODE]. try removing that and see what happens, if you don't have display block in your #navbar li a{ } then i am not sure what your are asking...a like would be helpful

[amars1983]

I've also added it to the non-hover #navbar li a {, but it adds the extra space to all of the list items, not just the one being hovered over.

[Camron467]

now add, padding: 0; to both of them

[amars1983]

That still doesn't do it. Here is a link to the navigation menu:

http://www.marsdenfamily.us/test/sidebar.html

Thanks for your help.

[jhaycutexp]

set the styles to li {margin:0;}

and actually your missing something.. you should do your styles properly..

when you do it like <li><a>link</a></li>

you could easily just..

li a{display:block;
      width:100px;
       height:20px;
       background:#333;
       color:#FFF;
       text-decoration:none;
      }

li a:hover{display:block;
      width:100px;
       height:20px;
       background:#333;
       color:#FFF;
       text-decoration:underline;
      }

so in this sense.. it will not be bugging on whatever ie your working on.. i know that li:hover works on ie7 and up.. and other browsers.. but not ie6

just my two cents

[abduraooft]

Hi there,

It's the known hasLayout issue of IE and the following would fix it.

#navbar li a{
	text-decoration:none;
	color:#FFF;
	display:block;
	padding:0px;
	[ICODE]height:1%;[/ICODE]
}

You'd need to add

*{
margin:0;
padding:0;
}

into your CSS and then need to edit/remove the following properties

#navbar {
	[ICODE]/*margin-top:-12px;*/[/ICODE]
	list-style:none;
}
#navbar li{
	background:#000;
	padding:5px;
	width:135px;
	[ICODE]/*margin-left:-40px;*/[/ICODE]
	border-bottom:1px solid #FFF;
}

[amars1983]

Thank you so much. The 1% height worked perfectly. My negative margins were for positioning on the page the navigation menu is on. Thanks for you help.