My main header navigation menu looks perfect in Firefox. But once I load it up in IE 6 or Safari the last button is moved down below the rest of the buttons and my logo disappears. Help is appreciated. Here is the header code and some Screen shots.
HTML
Code:
<div id="header">
<div id="menu">
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="engineering/engineering.html">Engineering</a></li>
<li><a href="documentcontrol/documentcontrol.html">DocumentControl</a></li>
<li><a href="manufacturing/manufacturing.html">Manufacturing</a></li>
<li><a href="teamresources/teamresources.html">TeamResources</a></li>
<li><a href="maintenance/maintenance.html">Maintenance</a></li>
<li><a href="customersupport/customersupport.html">CustomerSupport</a></li>
<li><a href="mailto:blahbloooh@nothing.com?cc=blahblah@nothing.com">ITdept.</a></li>
</ul>
</div>
</div>
<div id="logo-wrap">
<div></div>
</div>
CSS
Code:
/* Header */
#header {
width: 860px;
height: 52px;
margin: 0 auto;
background: url(images/img02.jpg) no-repeat left top;
}
/* Menu */
#menu {
float: left;
width: 860px;
height: 54px;
}
#menu ul {
margin: 0;
padding: 0px 0 0 20px;
list-style: none;
line-height: normal;
}
#menu li {
display: block;
float: left;
}
#menu a {
display: block;
float: left;
padding: 12.75px 9px;
letter-spacing: -.55px;
text-decoration: none;
text-transform: none;
font: 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFFFFF;
border-style: outset;
border-width: thin;
border-color: #333333;
}
#menu a:hover {
background: #65944A;
color: #FFF;
}
#menu .current {
background: #65944A;
color: #FFF;
}
#menu .current_page_item a {
color: #FFFFFF;
}
/** LOGO */
#logo-wrap {
width: 860px;
margin: 0 auto;
padding: 75px 0 0px 0;
background: url(images/karlee.png) no-repeat top right;
}
#logo {
width: 820px;
height: 200px;
margin: 0 auto;
background: url(images/img05.jpg) no-repeat left top;
}
#logo h1, #logo h2 {
float: left;
margin: 0;
padding: 0 0 0 20px;
line-height: normal;
}
#logo h1 {
padding-top: 95px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:36px;
font-style: italic;
}
#logo h1 a {
text-decoration: none;
color: #FFFFFF;
}
#logo h1 a:hover { text-decoration: underline; }
#logo h2 {
padding: 115px 0 0 5px;
font: italic 13px Georgia, "Times New Roman", Times, serif;
color: #000000;
}
#logo p a {
text-decoration: none;
color: #B6ACA2;
}
#logo p a:hover { text-decoration: underline; }
Firefox 3
Internet Explorer 6