Horizontal menu different in IE7 [Archive]

burginsteve

09-06-2008, 11:47 AM

I've used this type of menu using tables to position it but I'm now trying be tableless. Can anyone tell me why it positions differently in IE7 when it's exactly right in Firefox & Chrome. Here's the menu http://www.lucy2012.com/menu_divs.htm and here's my css...

body
{
background:#333333;
color:#cccccc;
padding:0px;
margin:0px;
font-family: "Lucida Grande", Tahoma, Verdana, Sans-serif;
font-size:73.0%;
}

#wrapper-foot{
width: 710px;
height: 32px;
margin: 0px auto;
}

/* -----[ Navigation ]--------------------------------------------------------------------- */
#nav {
float: left;
}
.nav li {
display: inline;
font: 14px 'Trebuchet MS',sans-serif;
}
.nav li a {
position: relative; top: 7px;
float: left;
display: block;
border-width: 0;
padding: 0 8px;
color: #66CCFF;
text-decoration: none;
}
.nav li a:hover,
.nav li.here a,
.nav li.here a:hover {
top: 4px;
padding-bottom: 2px;
border-bottom: 5px solid transparent;
}
.left li a {
float: left;
}
.nav li a:hover,
.nav li.here a,
.nav li.here a:hover {border-color: #0299CE;}
#footer .nav li.here a {border-color: #0299CE;}

/* -----[ Footer Navigation ]--------------------------------------------------------------------- */
#footer {
height: 11px;
margin-top: 6px;
}
#footer .nav {
margin: 0px 6px 0px 0px;
}
#footer .nav li a {
top: 4px;
}
#footer .nav li a:hover,
#footer .nav li.here a,
#footer .nav li.here a:hover {
top: 0;
}
#footer .nav li a.large {
padding-left: 10px;
font-family: 'Trebuchet MS',sans-serif;
}

#footer-bar {
width:650px;
height: 8px;
padding: 0px;
margin: 0px 0px 0px 30px;
background: #0299CE;
}

TheJoshMan

09-25-2008, 07:03 PM

IE defines padding/margin/positioning differently than everyone else because they're "special"...

To fix it just use a conditional statement in your html which will adjust for IE.

<head>

</head>