...

View Full Version : CSS Horizontal Nav with image swap not working



clint6998
11-29-2012, 04:05 PM
Can't figure out what I did wrong... The image swap does not work and neither does the link. Can someone help me out here and help me figure out what I did wrong?

http://tacticaloffense.com/indexNew.php

Here is my HTML:



<div id="headerTopNav">
<ul id="topNav">
<li id="home"><a href="index.php" class="home">Home</a></li>
<li id="spacer"></li>
<li id="about"><a href="about.php" class="about">About</a></li>
<li id="spacer"></li>
<li id="products"><a href="shop/index.php" class="products">Products</a></li>
<li id="spacer"></li>
<li id="wpNews"><a href="news/index.php" class="wpNews">News</a></li>
<li id="spacer"></li>
<li id="contact"><a href="contact.php" class="contact">Contact</a></li>
</ul>
</div>


Here is my CSS cod that pertains to the nav:



#headerTopNav {
position:absolute;
top:11px;
left:520px;
height:30px;
}
#topNav {
height:30px;
padding:0;
margin:0;
display:inline;
}
#topNav li {
list-style:none;
float:left;
}
ul#topNav #spacer {
background:url(../img/nav/navSpacer.png) no-repeat;
background-repeat:no-repeat;
width:1px;
height:30px;
}

#topNav a {
display:inline-block;
height:30px;
text-indent:-9000px;
}
#topNav #home, #topNav a.home,
#topNav #about, #topNav a.about,
#topNav #products, #topNav a.products,
#topNav #wpNews, #topNav a.wpNews,
#topNav #contact, #topNav a.contact {
height:30px;
}
#topNav #home, #topNav a.home {
width:77px;
}
#topNav #about, #topNav a.about {
width:102px;
}
#topNav #products, #topNav a.products {
width:99px;
}
#topNav #wpNews, #topNav a.wpNews {
width:72px;
}
#topNav #contact, #topNav a.contact {
width:92px;
}

#topNav #home {
background:url(../img/nav/nav_map.png) no-repeat -246px 0px;
}
#topNav #home:hover {
background-position: -246px -30px;
}
#topNav #about {
background:url(../img/nav/nav_map.png) no-repeat 0px 0px;
}
#topNav #about:hover {
background-position: 0px -30px;
}
#topNav #products {
background:url(../img/nav/nav_map.png) no-repeat -570px 0px;
}
#topNav #products:hover {
background-position: -570px -30px;
}
#topNav #wpNews {
background:url(../img/nav/nav_map.png) no-repeat -447px -60px;
}
#topNav #wpNews:hover {
background-position: -447px -90px;
}
#topNav #contact {
background:url(../img/nav/nav_map.png) no-repeat -140px -60px;
}
#topNav #contact:hover {
background-position: -140px -90px;
}


Any help would be greatly appreciated as I am at a loss...

Thanks,

Clint

Excavator
11-30-2012, 02:35 AM
Hello clint6998,
That menu works fine for me, links and rollovers both. You must have fixed it?
Both the Home/About Us/Products/News/Contact and the Cart Contents/Checkout/My Account work.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum