SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nav bar on/off states

    Hey,

    Please can someone have a look at this link in IE7/8.

    When i hover over the nav bar links they do something wierd, they go white then show their hover state..

    You can see this here..

    http://www.freemanholland.com/sports/

    Regards

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You should never swap an image on hover because it is too slow. The image needs to be preloaded which can be done in a few ways.

    One way is to stitch both states into one image and then on hover just change the background-position and as the image is already loaded there will be no day.

    Without changing your images there is another way and that is to load the over state of the image into the parent (the list element) and then the nrromal state goes into the anchor. On rollover you make the anchors background transparent and the image underneath which is already loaded shows straight away without flicker.

    You seem to have some weird stuff going on there anyway as your menu is misplaced in IE6. The dimensions are wrong and you haven't cleared the default margins/padding on the list and you need to set the menu to clear the floats above.

    Here is a quick revision:

    Code:
    ul.menu {
        list-style:none;
        padding:0;
        margin:0;
        width:100%;
        clear:both;
    }
    ul.menu li {
        float:left;
    }
    ul.menu li a {
        height:50px;
        display:block;
        text-indent:-20000px;
        float:left;
    }
    ul.menu li.home {
        width:172px;
        background:url(http://www.freemanholland.com/sports/nav_images/btn_1_over.jpg) 0 0 no-repeat;
    }
    ul.menu li.home a {
        width:172px;
        background:url(http://www.freemanholland.com/sports/nav_images/btn_1.jpg) 0 0 no-repeat;
    }
    
    ul.menu li.about {
        width:141px;
        background:url(http://www.freemanholland.com/sports/nav_images/btn_2_over.jpg) 0 0 no-repeat;
    }
    ul.menu li.about a {
        width:141px;
        background:url(http://www.freemanholland.com/sports/nav_images/btn_2.jpg) 0 0 no-repeat;
    }
    
    ul.menu li.services {
        width:183px;
        background:url(http://www.freemanholland.com/sports/nav_images/btn_3_over.jpg) 0 0 no-repeat;
    }
    ul.menu li.services a {
        width:183px;
        background:url(http://www.freemanholland.com/sports/nav_images/btn_3.jpg) 0 0 no-repeat;
    }
    
    ul.menu li.therapies {
        width:110px;
        background:url(http://www.freemanholland.com/sports/nav_images/btn_4_over.jpg) 0 0 no-repeat;
    }
    ul.menu li.therapies a {
        width:110px;
        background:url(http://www.freemanholland.com/sports/nav_images/btn_4.jpg) 0 0 no-repeat;
    }
    
    ul.menu li.staff {
        width:78px;
        background:url(http://www.freemanholland.com/sports/nav_images/btn_5_over.jpg) 0 0 no-repeat;
    }
    ul.menu li.staff a {
        width:78px;
        background:url(http://www.freemanholland.com/sports/nav_images/btn_5.jpg) 0 0 no-repeat;
    }
    
    ul.menu li.reviews {
        width:76px;
        background:url(http://www.freemanholland.com/sports/nav_images/btn_6_over.jpg) 0 0 no-repeat;
    }
    ul.menu li.reviews a {
        width:76px;
        background:url(http://www.freemanholland.com/sports/nav_images/btn_6.jpg) 0 0 no-repeat;
    }
    
    ul.menu li.contact {
        width:99px;
        background:url(http://www.freemanholland.com/sports/nav_images/btn_7_over.jpg) 0 0 no-repeat;
    }
    ul.menu li.contact a {
        width:100px;
        background:url(http://www.freemanholland.com/sports/nav_images/btn_7.jpg) 0 0 no-repeat;
    }
    
    ul.menu li a:hover{background:transparent!important}
    Code:
        <div id="mo_header"> </div>
        <ul class="menu">
            <li class="home"><a href="#" title="home">home</a></li>
            <li class="about"><a href="#" title="about">about</a></li>
            <li class="services"><a href="#" title="services">services</a></li>
            <li class="therapies"><a href="#" title="therapies">therapies</a></li>
            <li class="staff"><a href="#" title="staff">staff</a></li>
            <li class="reviews"><a href="#" title="reviews">contact</a></li>
            <li class="contact"> <a href="#" title="contact">contact</a></li>
        </ul>
    That should do what you want without flicker now

  3. #3
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect, i can see what you mean, the page tried to load the new button when i could have the main button already preloaded.

    Thanks for that.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •