Need help with navigation in IE6 and IE7

K

kiyas85

New Member
Hi,
Here's a test version of the navigation i'm working on.
http://www.bridgingthoughts.com/test/nav/nav.html

It works perfectly in firefox, Opera , Safari and IE8. In IE6 and IE7 the rollover image does not change when i hover on the icon. I need to hover on the place when the hidden menu txt is present. Is there any way to do this properly in all browsers, am I missing something here...
Please help...

thanks in advance...
 
E

Ennesus

New Member
<style type="text/css">
#nav ul{ width:812px; height:70px; float:left; list-style:none; padding:11px 0 10px 0; margin:0; background:url(images/nav_bg.jpg) no-repeat;}
#nav ul li{ float:left; padding:0; margin:0;}
#nav ul li a{ float:left; text-indent:-9999px; overflow:hidden;}
/* Home */
#nav ul li.home a{ width:40px; height:70px; padding:0; margin:0 0 0 55px; background:url(images/home.jpg) no-repeat center; display:block-inline;}
#nav ul li.home a:hover{ background:url(images/home_over.jpg) no-repeat center center;}
/* About us */
#nav ul li.about a{ width:66px; height:70px; padding:0; margin:0 0 0 15px; background:url(images/about.jpg) no-repeat center; display:block-inline;}
#nav ul li.about a:hover{ background:url(images/about_over.jpg) no-repeat center center;}
/* Campaign */
#nav ul li.campaign a{ width:78px; height:70px; padding:0; margin:0 0 0 15px; background:url(images/campaign.jpg) no-repeat center; display:block-inline;}
#nav ul li.campaign a:hover{ background:url(images/campaign_over.jpg) no-repeat center center;}
/* Location */
#nav ul li.location a{ width:69px; height:70px; padding:0; margin:0 0 0 15px; background:url(images/location.jpg) no-repeat center; display:block-inline;}
#nav ul li.location a:hover{ background:url(images/location_over.jpg) no-repeat center center;}
/* support */
#nav ul li.support a{ width:56px; height:70px; padding:0; margin:0 0 0 15px; background:url(images/support.jpg) no-repeat center; display:block-inline;}
#nav ul li.support a:hover{ background:url(images/support_over.jpg) no-repeat center center;}
/* contact */
#nav ul li.contact a{ width:76px; height:70px; padding:0; margin:0 0 0 15px; background:url(images/contact.jpg) no-repeat center; display:block-inline;}
#nav ul li.contact a:hover{ background:url(images/contact_over.jpg) no-repeat center center;}

</style>


try this instead , and read the css you might learn something from it
 
You must log in or register to reply here.
Top