Images not lining up correctly in IE

HTML & CSS
1

Hello,

Fixing up this website that was designed for a customer of ours. You will notice on the top right in the header, the blue boxes do not line up right next to the text as intended.

http://vismarkgroup.com/dev/ZitoMedia2010/

Any ideas?

2

Thank you Rayzur! I actually forgot to update this thread, as I tinkered with the code a bit since I posted this thread.

Thanks again!

3

Hi,
You were on the right track using them as background images but you can eliminate all those extra divs and <p> tags.

All you need is a simple UL and then set the BG image on the anchor along with right padding to preserve the image.

This will work in all IEs’ and all other browsers


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Header Menu</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font:100&#37;/1.4 arial,helvetica,sans-serif;
}
#header {
    width:785px;
    margin:0 auto;
    overflow:hidden;/*contain child floats*/
    background:#EEF
}
ul#headernav {
    float:right;
    width:200px;
    margin:0;
    padding:5px 0 0;
    list-style:none;
}
#headernav li,
#headernav li a {
    float:right;
}
#headernav li a {
    width:175px; /*200px w/ padding (IE6/7 need the width)*/
    height:24px;
    padding:0 25px 0 0;
    color:#134679;
    text-align:right;
    text-decoration:none;
    font:bold 11px/21px arial,helvetica,sans-serif;
    background:url(../images/headbutton.jpg) no-repeat 100% 50%;
}
</style>

</head>
<body>

<div id="header">
    <ul id="headernav">
        <li><a href="https://cableanytime.net/ZitoMedia/">Pay Your Bill</a></li>
        <li><a href="https://mail.zitomedia.net/webmail/">Check Your Email</a></li>
        <li><a href="http://voip.zitomedia.net/">Check Your Voicemail</a></li>
        <li><a href="https://mail.zitomedia.net/">Manage Email Accounts</a></li>        
    </ul>
</div>

</body>
</html>