Fixing "Block" Link CSS for IE7 and above

So Im having a wonderful time writing CSS and HTML for my new site, but realised displaying the "block" display effect didn't work in IE8 Beta 2 but works fine in all other browsers.

As you can see in the pic below (FF), the block effect and text color change are in action when the mouse passes over.


However in IE, the block effect doesnt work...only the text color change...


Any ideas how I could get that to show?

Here is my CSS that I currently have in place as well. The pics I show you are controlled by UL and LI tags. (I know the CSS is a bit redundant, but I'll fix it soon)

#headlines ul {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	list-style-type: none;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#headlines li {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999999;
	width: 280px;
}
#headlines ul a {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
	text-decoration: none;
	width: 280px;
	display: block;
	padding-top: 5px;
	padding-bottom: 5px;
}
#headlines ul a:hover {
	color: #FFFFFF;
	width: 280px;
	display: block;
	background-color: #999999;
	padding-top: 5px;
	padding-bottom: 5px;

Code (markup):

 

Try:

#headlines ul [B]li[/B] a {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
	text-decoration: none;
	width: 280px;
	display: block;
	padding-top: 5px;
	padding-bottom: 5px;
}
#headlines ul [B]li[/B] a:hover {
	color: #FFFFFF;
	width: 280px;
	display: block;
	background-color: #999999;
	padding-top: 5px;
	padding-bottom: 5px;
}

Code (markup):

 

Still didnt work... I made a mistake with the title of this post btw...it works fine in IE6 and IE7 but not in IE 8 Beta 2.

 

Do not mess with your page to accommodate IE8. It's beta. You should consider that a bug and report it to MSFT.

cheers,

gary

 

This is going to sound a little odd, but IE has always been a bit Carlos Mencia grey when it comes to the formatting of LI. The first thing I would do is strip the li of any properties and force them to display:inline.

#headlines ul {
	list-style:none;
	margin:0;
	padding:0;
}

#headlines li {
	display:inline;
}

#headlines ul a {
	display:block;
	width:280px;
	padding:5px 0;
	text-decoration: none;
	font:normal 12px/14px geneva,arial,helvetica,sans-serif;
	color:#333;
	border:1px solid #999;
}

#headlines ul a:active,
#headlines ul a:focus,
#headlines ul a:hover {
	color:#FFF;
	background:#999;
}

Code (markup):

SHOULD work fine in IE 7 and 8.

Oh, and Ludas, adding LI to the CSS like that makes absolutely zero difference - you do NOT have to implement it like that - hell, if I could see the markup I'm willing to bet we don't even 'need' to say UL before the anchors either, and there's a pretty good chance there's no reason for the #headlines to be on a separate DIV instead of applied directly to the UL - but I'd have to see the markup and final appearance for that determination.

 

@deathshadow - ok I will try that and see what happens.

@kk5st - yea I hear ya, ran into a couple of other CSS probs with IE8 but overcame them to look the same in all browsers.

 

@deathshadow - i baked you this cookie because you were able to solve my problem... thanks mate.