The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Rollover buttons are spazzing out!

  • # August 27, 2008 at 5:09 pm


    As you can see, when you mouse over the rollover button, it flashes on and off. Using firebug I can see that the <a> element is not the same size as the image. I’ve tried to remedy this by setting the font-size for the <a> element to the same height as the image, but this didn’t work.



    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

    Students Eat Free – Exclusive Discounts


    * { margin: 0; padding: 0; }

    #content {margin:0 auto; width:1000px;}
    #topbar {background-image: url(images/top_green.jpg); background-repeat:repeat-x; min-height:74px; height:74px;}

    #logo {float:left; display:inline;}
    #leaderboard {margin-top:25px;}

    /*Navigation Bar*/

    #navbar {background-image: url(images/navbar.jpg) ; background-repeat:no-repeat; min-height:32px; height:34px; width:767px;}

    #exclusive_button {width:166px; height:34px; min-height:34px; display:inline;}
    #exclusive_button:hover {visibility:hidden;}

    #regular_button {width:156px; height:34px; min-height:34px; display:inline; position:relative; left:30px;}
    #regular_button:hover {visibility:hidden;}

    #advertise_button {width:107px; height:34px; min-height:34px; display:inline; position:relative; left:45px;}
    #advertise_button:hover {visibility:hidden;}

    #contact_button {width:128px; height:34px; min-height:34px; display:inline; position:relative; left:56px;}
    #contact_button:hover {visibility:hidden;}

    /*End Navigation Bar*/

    img {border:0}


    # August 27, 2008 at 6:48 pm

    This reply has been reported for inappropriate content.

    in the name of accessibility and web standards, you ought to use image replacement for your menu links and not inline images. The navbar would be more semantically aware if it was an unordered list, whose <li> elements were floated. With background images placed on you <a> elements in your css and declaring them as block elements you will avoid the flashing problem. Be sure to declare also the width and height of the <a> elements to match that of the background imagery.
    If you are unsure, then any tutorial on CSS menus should point you in the right direction.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed