Menu not quite right in IE

I am having some trouble getting my menu to display correctly in IE

this how it should like like: (in firefox)http://i262.photobucket.com/albums/ii106/fadetoblack22/head.gif

This is how it looks in IE http://i262.photobucket.com/albums/ii106/fadetoblack22/head2.gif

Ie seems to push it down slightly making it non-vertically centered.

The problem seems to be in the difference in padding used in IE controlled in .border {padding-top: 6px; }

This is the menu html

<div class="mainheader"><a href="http://www.bigfreebet.com/index.php"><img src="http://www.bigfreebet.com/images/overlay.gif" alt="home page" title="homepage" width="715" height="100" border="0" /></a>

<div class=border><a href="http://www.bigfreebet.com/index.php" title="Home" class="linkopacity"><img src="http://www.bigfreebet.com/images/menu/home.gif" alt="Home" border="0"/></a>

<a href="http://www.bigfreebet.com/freebets.php" title="Free Bets" class="linkopacity" id="border"><img src="http://www.bigfreebet.com/images/menu/freebets.gif" alt="Free bets" border="0" /></a>

<a href="http://www.bigfreebet.com/BetAdvice/" title="Bet Advice" class="linkopacity"><img src="http://www.bigfreebet.com/images/menu/guides.gif" alt="guides" border="0" /></a>

<a href="http://www.hotonlinecasinos.com" rel="nofollow" target="_blank" title="Casino Bonuses" class="linkopacity"><img src="http://www.bigfreebet.com/images/menu/casino.gif" alt="reviews" border="0" /></a>

<a href="http://www.bigfreebet.com/news.php" rel="nofollow" title="Sport news" class="linkopacity"><img src="http://www.bigfreebet.com/images/menu/news.gif" alt="news" border="0" /></a>

<a href="http://www.bigfreebet.com/picks.php" title="Bet Picks" class="linkopacity"><img src="http://www.bigfreebet.com/images/menu/betpicks.gif" alt="picks" border="0" /></a>

<a href="http://www.bigfreebet.com/reviews.php" title="Reviews" class="linkopacity"><img src="http://www.bigfreebet.com/images/menu/reviews.gif" alt="reviews" border="0" /></a>

<a href="http://www.bigfreebet.com/contact.php" rel="nofollow" title="Contact" class="linkopacity"><img src="http://www.bigfreebet.com/images/menu/contact.gif" alt="contact" border="0" /></a>
</div>
</div>

Code (markup):

this is the css for it:

.mainheader {
        margin-left: auto;
        margin-right: auto;
        width: 918px;
        background-image: url(images/header.gif);
        background-repeat: no-repeat;
        background-position: center top;
        height: 141px;
        text-align: left;
        padding-left: 12px;
        vertical-align: top;
        color: #FFFFFF;
        padding-top: 0px;
}


.border {padding-top: 6px; }

.border img {
        border-right-width: 1px;
        border-right-style: solid;
        border-right-color: #FFFFFF;   
    
}

Code (markup):

Can anyone help make it work please?

 

make them 2 DIVs, 1 for image and 2nd for menu

 

I have just done that. I just required moving one of the </div> at the end of the html to before the menu code.

It didn't make any difference though.

 

If the problem lies in IE then you can always add a separate style sheet to the header for IE6 or 7 (or both).

Then you can the change the CSS for IE only - set the padding-top to 0.

 

Thanks. I used the:

<!--[if lte IE 7]>

command. Hopefully that makes it do the same for IE 6 and 5.