I have 2 navigation sets in a site I’m designing, the main and a submenu. Everything looks and works great in FF and Safari on both Mac & PC. I’m running into problems with it in IE. The main navigation is fully functional but is getting cut off about 20 pixels on the bottom in IE. And the submenu uses a .png format for the image and is not showing up. Here is a link that shows both navigations in use: http://pinnacleoutdoors.net/products.html
Here’s my html for the navigation:
<div id="mainNavContainer">
<div id="topNav" class="clear">
<ul>
<li id="homeLink"><a href="index.html" title="Home">Home</a></li>
<li id="aboutLink"><a href="about.html" title="About Us">About Us</a></li>
<li id="productsLink"><a href="products.html" title="Our Products">Our Products</a></li>
<li id="prostaffLink"><a href="prostaff.html" title="Pro Staff">Pro Staff</a></li>
<li id="resourcesLink"><a href="resources.html" title="Resources">Resources</a></li>
<li id="communityLink"><a href="community.html" title="Community">Community</a></li>
<li id="vendorsLink"><a href="vendors.html" title="Vendors">Vendors</a></li>
<li id="contactLink"><a href="contact.html" title="Contact Us">Contact Us</a></li>
</ul>
</div>
<div id="productNav">
<ul>
<li><a href="products_scents.html">Deer Scents & Attractants</a></li>
<li><a href="products_gamecalls.html">Game Calls</a></li>
<li><a href="products_scentcontrol.html">Scent Control</a></li>
<li><a href="products_waterfowl.html">Waterfowl</a></li>
<li><a href="products_accessories.html">Hunting Accessories</a></li>
<li><a href="products_art.html">Photography & Art</a></li>
<li><a href="products_apparel.html">Pinnacle Apparel</a></li>
<li><a href="products_health.html">Outdoor Health & Nutrition</a></li>
</ul>
</div>
</div>
And here’s the CSS (sorry that there’s so much of it):
#mainNavContainer{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:12px;
margin: 0px 6px 0px 0px;
padding:0px 0px 0px 0px;
width:100%;
height:30px;
float:left;
clear:both;
}
/* Top Nav --------------------------------------------------------*/
/*-----------------------------------------------------------------*/
#topNav {
display: block;
padding: 0;
border: 0;
background: #000 url(images/topnav.jpg) no-repeat top left;
height: 39px;
width: 1007px;
margin: 0 0 0 0;
}
#topNav ul {
width: 1007px;
height: 39px;
margin: 0 0 0 0px;
list-style: none;
padding: 0;
border: 0;
}
#topNav ul li {
list-style-type: none;
display: inline;
margin-right: 0px;
padding: 0;
float: left;
}
/* HOME----------*/
li#homeLink,
li#homeLink a {
display: inline;
background: transparent url(images/btnHome.jpg) no-repeat top left;
float: left;
margin: 0;
padding: 0;
overflow: hidden;
width: 89px;
height: 39px;
clip: rect(0, 89px, 39px, 0);
}
li#homeLink a {
padding: 39px 0 0 0;
height: 0px !important;
height /**/:39px;
}
li#homeLink a:hover,
li#homeLink a.selected {
background-position: 0 -39px;
}
/* ABOUT----------*/
li#aboutLink,
li#aboutLink a {
display: inline;
background: transparent url(images/btnAbout.jpg) no-repeat top left;
float: left;
margin: 0;
padding: 0;
overflow: hidden;
width: 120px;
height: 39px;
clip: rect(0, 120px, 39px, 0);
}
li#aboutLink a {
padding: 39px 0 0 0;
height: 0px !important;
height /**/:39px;
}
li#aboutLink a:hover,
li#aboutLink a.selected {
background-position: 0 -39px;
}
/* PRODUCTS----------*/
li#productsLink,
li#productsLink a {
display: inline;
background: transparent url(images/btnProducts.jpg) no-repeat top left;
float: left;
margin: 0;
padding: 0;
overflow: hidden;
width: 162px;
height: 39px;
clip: rect(0, 162px, 39px, 0);
}
li#productsLink a {
padding: 39px 0 0 0;
height: 0px !important;
height /**/:39px;
}
li#productsLink a:hover,
li#productsLink a.selected {
background-position: 0 -39px;
}
/* PROSTAFF----------*/
li#prostaffLink,
li#prostaffLink a {
display: inline;
background: transparent url(images/btnProStaff.jpg) no-repeat top left;
float: left;
margin: 0;
padding: 0;
overflow: hidden;
width: 124px;
height: 39px;
clip: rect(0, 124px, 39px, 0);
}
li#prostaffLink a {
padding: 39px 0 0 0;
height: 0px !important;
height /**/:39px;
}
li#prostaffLink a:hover,
li#prostaffLink a.selected {
background-position: 0 -39px;
}
/* RESOURCES----------*/
li#resourcesLink,
li#resourcesLink a {
display: inline;
background: transparent url(images/btnResources.jpg) no-repeat top left;
float: left;
margin: 0;
padding: 0;
overflow: hidden;
width: 132px;
height: 39px;
clip: rect(0, 132px, 39px, 0);
}
li#resourcesLink a {
padding: 39px 0 0 0;
height: 0px !important;
height /**/:39px;
}
li#resourcesLink a:hover,
li#resourcesLink a.selected {
background-position: 0 -39px;
}
/* COMMUNITY----------*/
li#communityLink,
li#communityLink a {
display: inline;
background: transparent url(images/btnCommunity.jpg) no-repeat top left;
float: left;
margin: 0;
padding: 0;
overflow: hidden;
width: 134px;
height: 39px;
clip: rect(0, 134px, 39px, 0);
}
li#communityLink a {
padding: 39px 0 0 0;
height: 0px !important;
height /**/:39px;
}
li#communityLink a:hover,
li#communityLink a.selected {
background-position: 0 -39px;
}
/* VENDORS----------*/
li#vendorsLink,
li#vendorsLink a {
display: inline;
background: transparent url(images/btnVendors.jpg) no-repeat top left;
float: left;
margin: 0;
padding: 0;
overflow: hidden;
width: 105px;
height: 39px;
clip: rect(0, 105px, 39px, 0);
}
li#vendorsLink a {
padding: 39px 0 0 0;
height: 0px !important;
height /**/:39px;
}
li#vendorsLink a:hover,
li#vendorsLink a.selected {
background-position: 0 -39px;
}
/* CONTACT----------*/
li#contactLink,
li#contactLink a {
display: inline;
background: transparent url(images/btnContact.jpg) no-repeat top left;
float: left;
margin: 0;
padding: 0;
overflow: hidden;
width: 141px;
height: 39px;
clip: rect(0, 141px, 39px, 0);
}
li#contactLink a {
padding: 39px 0 0 0;
height: 0px !important;
height /**/:32px;
}
li#contactLink a:hover,
li#contactLink a.selected {
background-position: 0 -39px;
}
#productNav{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:13px;
font-variant: small-caps;
margin: 0px 0px 0px 64px;
padding:0px 0px 0px 0px;
height:43px;
position:relative;
float:left;
clear:both;
}
#productNav ul{
margin:0;
padding:0;
list-style:none;
}
#productNav div{
margin:0;
padding:0;
width:100%;
clear:left;
}
#productNav li{
float:left;
}
#productNav a:link{
background:transparent url(images/tab.png) no-repeat scroll left top;
font-family:Times, Times New Roman, serif;
font-weight:bold;
font-size:13px;
font-variant: small-caps;
display:block;
width:110px;
height:43px;
color:#A35507;
text-decoration:none;
text-align:center;
display:table-cell;
vertical-align:middle;
}
#productNav a:visited{
background:transparent url(images/tab.png) no-repeat scroll left top;
font-family:Times, Times New Roman, serif;
font-weight:bold;
font-size:13px;
font-variant: small-caps;
display:block;
width:110px;
height:43px;
color:#A35507;
text-decoration:none;
text-align:center;
display:table-cell;
vertical-align:middle;
}
#productNav a:hover{
font-family:Times, Times New Roman, serif;
font-weight:bold;
font-size:13px;
font-variant: small-caps;
display:block;
width:110px;
height:43px;
color:#333333;
text-decoration:none;
text-align:center;
display:table-cell;
vertical-align:middle;
}
#productNav #active{
background:transparent url(images/tab.png) no-repeat;
font-family:Times, Times New Roman, serif;
font-weight:bold;
font-size:13px;
font-variant: small-caps;
display:block;
width:110px;
height:43px;
color:#333333;
text-decoration:none;
text-align:center;
display:table-cell;
vertical-align:middle;
}
#productNav #active a{
background:transparent url(images/tab.png) top right no-repeat;
font-family:Times, Times New Roman, serif;
font-weight:bold;
font-size:13px;
font-variant: small-caps;
display:block;
width:110px;
height:43px;
color:#333333;
text-decoration:none;
text-align:center;
display:table-cell;
display:table-cell;
vertical-align:middle;
}
#productNav ul ul {
display: none;
position:absolute;
z-index:500;
top:auto;
}
#productNav ul li ul {
display: none;
}
#productNav ul li:hover ul {
display: block;
position: absolute;
}
#productNav ul li:hover ul li a {
display:block;
background:##EDC487;
color:#000000;
width: 80px;
height:20px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#productNav ul li:hover ul li a:hover {
background:#EDC487;
color:#000000;
display:block;
}
#productNav2{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:13px;
font-variant: small-caps;
margin: 0px 0px 0px 175px;
padding:0px 0px 0px 0px;
height:43px;
position:relative;
float:left;
clear:both;
}
#productNav2 ul{
margin:0;
padding:0;
list-style:none;
}
#productNav2 div{
margin:0;
padding:0;
width:100%;
clear:left;
}
#productNav2 li{
float:left;
}
#productNav2 a:link{
background:transparent url(images/tab.png) no-repeat scroll left top;
font-family:Times, Times New Roman, serif;
font-weight:bold;
font-size:13px;
font-variant: small-caps;
display:block;
width:110px;
height:43px;
color:#A35507;
text-decoration:none;
text-align:center;
display:table-cell;
vertical-align:middle;
}
#productNav2 a:visited{
background:transparent url(images/tab.png) no-repeat scroll left top;
font-family:Times, Times New Roman, serif;
font-weight:bold;
font-size:13px;
font-variant: small-caps;
display:block;
width:110px;
height:43px;
color:#A35507;
text-decoration:none;
text-align:center;
display:table-cell;
vertical-align:middle;
}
#productNav2 a:hover{
font-family:Times, Times New Roman, serif;
font-weight:bold;
font-size:13px;
font-variant: small-caps;
display:block;
width:110px;
height:43px;
color:#333333;
text-decoration:none;
text-align:center;
display:table-cell;
vertical-align:middle;
}
#productNav2 #active{
background:transparent url(images/tab.png) no-repeat;
font-family:Times, Times New Roman, serif;
font-weight:bold;
font-size:13px;
font-variant: small-caps;
display:block;
width:110px;
height:43px;
color:#333333;
text-decoration:none;
text-align:center;
display:table-cell;
vertical-align:middle;
}
#productNav2 #active a{
background:transparent url(images/tab.png) top right no-repeat;
font-family:Times, Times New Roman, serif;
font-weight:bold;
font-size:13px;
font-variant: small-caps;
display:block;
width:110px;
height:43px;
color:#333333;
text-decoration:none;
text-align:center;
display:table-cell;
display:table-cell;
vertical-align:middle;
}
