IE7 Issue: Navigation

[Historical Forums User]

Update: Maybe I’m not explaining this properly. Here’s an image to help better explain my issue. I’m fairly certain this is probably an IE7 bug that someone will be able to point out.

[img]http://www.adgrouponline.com/UPLOADS/ie7_nav.jpg[/img]

Hi folks! Doing some browser testing and I’ve hit a dead end on this one. My problem is when you hover over any of the tabs in the navigation menu, no go to link appears. It’s as if there isn’t one. This issue only occurs in IE7. Currently it’s working fine in IE6/8, FF and Safari. I’ve validated the html/css and it looks like there is no problem. Here’s the code and website link to better understand.

http://www.adgrouponline.com/cashforclass

HTML:

Code:

• Home
• Submit
• Rules
• View Vote

Download the latest Flash Player!

Victorville Autopark is proud to bring the Cash For Class Video Contest to your local school! All K-12 classes within the High Desert Cities are eligible to participate. Please read the rules and guidelines before making and submitting your classroom’s video!

Make a video no more than 2 minutes in length about pretty much anything! It could be about how your class could use the money, or a funny skit or a clever tale, song or dance. Creativity and originality are likely to score you those votes with the judges and general public!

The prize? Why school supplies of course. The Victorville Autopark will be rewarding 20 classrooms $500 gift certificates to Staples! Check out Staple’s website for school supply ideas!

Ends October 31st.

Copyright © 2009. Victorville Autopark. All Rights Reserved.

Navigation CSS:

Code:

/* Navigation */

#navigation { float: right; width: 600px; }
#nav_links li { float: left; padding-left: 5px; width: 125px; text-indent: -9999px; }
.home_nav a { position: absolute; display: block; width: 115px; height: 34px; text-indent: -9999px; }
.submit_nav a { position: absolute; display: block; width: 115px; height: 34px; text-indent: -9999px; }
.rules_nav a { position: absolute; display: block; width: 115px; height: 34px; text-indent: -9999px; }
.view_vote_nav a { position: absolute; display: block; width: 115px; height: 34px; text-indent: -9999px; }
.nav_links ul, ol, li { list-style: none; }

.home_nav { background: url(images/home_nav.png) no-repeat; width: 115px; height: 34px; }
.submit_nav { background: url(images/submit_nav.png) no-repeat; width: 115px; height: 34px; }
.rules_nav { background: url(images/rules_nav.png) no-repeat; width: 115px; height: 34px; }
.view_vote_nav { background: url(images/view_vote_nav.png) no-repeat; width: 115px; height: 34px; }

I’ll be on standby for this one. Any help would be very much appreciated! Thanks!
-Eric

[Historical Forums User]

Added a screenshot.

[TheDoc]

I had a quick look at it yesterday and couldn’t really see anything wrong with it I’m afraid. Haven’t really seen that come up before.

[Historical Forums User]

Thanks for taking the time to help me out guys.

You know what, that makes perfect sense apostrophe. Maybe I didn’t go about it the practical way. To answer your question, yes the links actually do work when you click on them, except of course on IE7.

Regarding the position: absolute, I notice when I take it out, at least on the Home tab, most of the tab loses it’s click-ability. I’m going to restructure the navigation as you recommended, by putting the background-image on the anchors instead of the list items. Hopefully I can get this working 100% on cross browsers within the next couple of hours. Thanks!

[Author]

Posts