IE not displaying padding properly :-(

lpcrooks · November 17th, 2006, 01:08 AM

hello,
i am a CSS noob (n00b?) and cannot figure out why IE (v6) is not displaying my padding correctly.
i have been using css for about 2 weeks and want to develop a menu that has padding on the <a> links in a list so that when i use background-color on that, the field will turn a different color when somebody hovers over whatever link.

here is what the menu looks like when i hover above one of the links:
in Firefox:
http://img176.imageshack.us/img176/3774/inffbq9.jpg

in IE 6:
http://img95.imageshack.us/img95/1148/inieua0.jpg

here is the code of the page. (i have not included the content and stuff, this is just the top).

Quote:

quote:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>TITLEofPAGE</title>

<style type="text/css">

body {
    width: 1007px;
    background-color: #FFF;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 12px; color: #000;
    }

* {padding: 0; margin: 0;} /* This effects all things, use after body selector */

/* START ----------------- top + menu */

#top {width: 1007px; display: inline;}

#top1-left {
    margin: 0; padding: 0;
    background-image: url(images/top-left.jpg);
    background-repeat: no-repeat;
    width: 566px; height: 131px;
    float: left;
    }
#top1-right {
    margin: 0; padding: 0;
    background-image: url(images/top-right.jpg);
    background-repeat: no-repeat;
    width: 441px; height: 131px;
    float: right;
    }

#menu {width: 1007px; display: inline;}

#menu-left {
    margin: 0; padding: 0;
    background-image: url(images/menu-bar.gif);
    background-repeat: no-repeat;
    width: 871px; height: 30px;
    float: left;
    }

#menu-right {
    margin: 0; padding: 0;
    background-image: url(images/menu-end.gif);
    background-repeat: no-repeat;
    width: 136px; height: 30px;
    float: right;
    }
/* END ----------------- top + menu */

#menutxt {position: absolute; top: 138px; left: 1px;}

#menutxt ul.menu {
    text-transform: capitalize;
}

#menutxt ul.menu li {
    list-style: none;
    display: inline;
}

#menutxt ul.menu a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 4px 18px 7px 18px;

}

#menutxt ul.menu a:hover {
    color: #fff;
    background-color: #2F6197;
}

</style>
</head>
<body>

<div id="top">
    <div id="top1">
        <div id="top1-left"></div>
        <div id="top1-right"></div>
    </div>
</div>

<div id="menu">
    <div id="menu1">
        <div id="menu-left"></div>
        <div id="menu-right"></div>
    </div>
</div>

<div id="menutxt">
    <ul class="menu">
        <li><a href="#">home</a></li>
        <li><a href="#">link1</a></li>
        <li><a href="#">link2</a></li>
        <li><a href="#">link3</a></li>
        <li><a href="#">link4</a></li>
    </ul>
</div>
</body>
</html>

i would really like IE to display the blue background the same way Firefox does. it is smaller in IE and i dont know why.
i would really appreciate any help, i know it can take a while looking over the code and whatnot, but i am stuck otherwise

thank you very much in advance :)