IE CSS positioning issue

[pdlr]

Hello everyone.

I am using html and css (wordpress site). I am using an image as a header with a list of text links that need to go on top. I decided to use <img> for the header image instead of placing at as a background.

I am using a negative relative positioning for the text links to put them back on top of the <img> that just came before it in the code.

It looks fine on firefox, but IE leaves a big space where the text links WOULD go relatively (you can even select the "space" with your mouse") right under the header. This pushes the content down. Plus, the text links don't even appear in the right place.

Anyone know what could be causing this?

see for yourself:

http://www.listopublicidad.com

the code:


<div id="header">
<a href="http://www.listopublicidad.com"><img src="/wp-content/themes/adtheme2/images/ad-header.jpg" alt="Rio Grande Valley Visual Arts" border="0" /></a>
<div id="ad-navigation">
<a href="#">featured articles</a> &nbsp; | &nbsp;
<a href="#">arts calendar</a> &nbsp; | &nbsp;
<a href="#">ongoing exhibitions</a> &nbsp; | &nbsp;
<a href="#">mailing list</a> &nbsp; | &nbsp;
<a href="#">submissions</a> &nbsp; | &nbsp;
<a href="#">donate</a> &nbsp; | &nbsp;
<a href="#">about a.d.</a>
</div>
</div>

the css:


#ad-navigation {
margin: 0px;
padding: 8px;
width: 884px;
position: relative;
top: -40px;
left: 10px;
font-size: 14px;
color: #333333;
line-height: 14px;
}

[Wickham]

It looks fine on IE6, IE7, Firefox, Opera and Safari. I can't see anything wrong with your strategy.

You've just changed the code, the image isn't a background-image in the CSS in your post above.

You now have a main image at the top and another image ad-navigation-bg.jpg underneath (paler green) which is a background-image in <div id="ad-navigation"> with the links inside. This is OK.