I'm having a small issue with IE7 in regards to a small peace of CSS for a top navigation.

Here is my code:


#header_nav {
position: absolute;
top: 187px !important;
top: 200px;
left: 25px !important;
left: -10px;
height: 22px;
line-height: 22px;
width: 860px;
padding: 0;
list-style: none;
}

#header_nav li {
margin: 0;
padding: 0 1.6em 0 0;
list-style: none;
display: inline;
}

#header_nav a {
color: #000;
text-decoration: none;
font-weight: bold;
}

#header_nav a:hover {
text-decoration: underline;
}


It looks fine in every browser except IE7. It even looks fine in IE6.

Basically the text positioning is a little pushed up in IE7. I hope that makes sense.

Here are two screen shots:

How it looks in IE7:


How it should look in IE7:

You could target the #header_nav li with a top margin (to push it, and the text, downwards) in IE7 only using the following (perfectly validating CSS) hack:

*:first-child+html #header_nav li {
margin:10px 0 0;
}

Sean: i believe that you just add it, because only IE 7 can see the selector.

The important part if you add the code after the code already there, so that it makes the changes to only IE7 after its loaded into all the others. But if that didn't work, then I guess you could just use the good old specific stylesheets, e.g.

<!--[if IE 7]>
<style media="all" type="text/css">
#header_nav li {
margin:10px 0 0;
}
</style>
<![endif]-->
Another thing (without seeing live code it's hard to tell) but you have absolute positioning with the the #header_nav div as,

top:187px !important;
top: 200px;
IE7 recognises the !important whereas IE6 does not... so maybe that's the cause? You may need to use the IE7 hack to have,

*:first-child+html #header_nav li {
top:200px;
}
So it then has the same properties as IE6. Does any of that make sense? I hope it does anyway.

@Christopher: Let me know when you'll be on Skype (send me an email) and I'll show you live code. Thanks again for all your help.