I'm sure I completely missed something in my CSS, but I've been working on a new design for my oldest website, and decided that in lieu of creating static link names like I did in my other project I've been working on, or no navigation bar like I did with my newest site, boredwrestlingfan.com, I thought I'd try my hand at CSS coding the main links in a navbar at the top of the page, in the header image. While it works fine in Firefox and Opera, in IE it comes up weird - the first link is below where it should be, the next one is higher, and it almost creates a stair-like effect leading to the last link, which is in the position it should be. You can check it out at http://testingground.fropac.com/s5pconcept and see for yourself. Obviously I'm just starting this one, as I haven't done up the link colors or anything. I'm also eventually going to need ideas about getting IE 6 and below to render the transparency properly in my PNG files because I have no clue how to work around that. Anyways, here's the code as it is now:
Anybody have any idea what I'm doing wrong to cause the stair effect in IE, or at least an idea of a workaround? Again, it only comes up wrong in IE, other browsers I've tested work fine.
ul#nav {height: 207px;
width: 696px;
background: url(images/header.png) no-repeat;
margin: -20px auto;
position: relative;
}
ul#nav li a{
display: block;
width: 112px;
float: right;
margin-top: 150px;
margin-left: 5px;
color: #777777;
font-size: 20px;
font-weight: bold;
text-decoration: none;
text-align: center;
}
ul#nav li a:hover, ul#nav li a:active{
color: #fff600;
}
Anybody have any idea what I'm doing wrong to cause the stair effect in IE, or at least an idea of a workaround? Again, it only comes up wrong in IE, other browsers I've tested work fine.
Chris has a good article on it:
http://css-tricks.com/prevent-menu-stepdown/