CSS Not Working in IE

Site: http://www.christianlittle.com/s/autumn/

If you view it in Firefox it works just ducky, but in Internet Explorer the menu right below the header doesn't render in CSS, it just shows plain text links.

HTML Code:

<div class="menua">
<a href="#">Text Link</a>
<a href="#">Text Link</a>
<a href="#">Text Link</a>
<a href="#">Text Link</a>
<a href="#">Text Link</a>
</div>

Code (markup):

CSS

.menua {
width: 874px; 
background-color: #00703C;
margin-top: 5px;
padding-top: 10px;
padding-bottom: 10px;
}

.menua a:link, .menua a:visited {
color: #FFFFFF;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
border-left: 1px solid #FFFFFF;
}

.menua a:hover {
background-color: #8CC63F;
}

Code (markup):

Can anybody provide some insights into why this is breaking?

 

Anybody able to help me on this? It's really bugging me, there's no reason why it shouldn't work in IE.

 

I tried just the pieces of code you have here and it worked fine, so I figured it must be inheriting it from somewhere else.

So I took a look at the CSS on the page itself, and I don't know if this is the cause, but after the .header class there is " ' " that shouldn't be there. Try getting rid of it.

 

I think you would need to style .menua a { to get the look in IE, although I haven't tested it.

Although that said, I would use lists to style the menu, as it gives you more control of your menu.

Try something like this:

CSS:

ul {padding: 0; margin: 0; width: 874px; background-color: #00703C; height: 50px; list-style:none;}
li { padding: 0; margin:0; float: left;  height: 50px; }
li a {color: fff; text-decoration: none; display: block; height: 30px; line-height: 30px; text-align: center; padding: 10px; }
li a:hover { background-color: #8CC63F; }

Code (markup):

HTML

	<ul>
<li><a href="#">Text Link</a></li>
<li><a href="#">Text Link</a></li>
<li><a href="#">Text Link</a></li>
<li><a href="#">Text Link</a></li>
<li><a href="#">Text Link</a></li>
	</ul>

Code (markup):

 

Ahhh that did it Thanks very much, rep added

 

ie is always tricky even if you have a right w3c html css