Horizontal menu different in IE7

**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...

Code:

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.

Code:

<head>
<!--[if IE]>
<style type="text/css">
.nav li a {
    left: 10px !important;
}
#footer-bar {
	margin: 0 !important;
}
</style>
<![endif]-->
</head>

Thread: Horizontal menu different in IE7

Thread Tools

Search Thread

Horizontal menu different in IE7

Bookmarks

Bookmarks

Posting Permissions