Grow your CSS skills. Land your dream job.

IE7 Issue: Navigation

  • # October 21, 2009 at 3:17 pm

    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:
    < ?php
    include("config.php");
    ?>

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">








    Participate

    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!

    Here's the deal

    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!

    Supply Your Classroom

    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!

    Check Out What's Going On At The Auto Park

    Cash For Clunkers
    Ends October 31st.


    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

    # October 22, 2009 at 12:36 pm

    Added a screenshot.

    # October 22, 2009 at 1:15 pm

    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.

    # October 22, 2009 at 1:29 pm

    Do the links actually work if you click on them?

    Why no hover state?

    The background images should really be on the anchors and not the list items, and the position:absolute; on the links serves no purpose.

    # October 22, 2009 at 6:37 pm

    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!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".