Grow your CSS skills. Land your dream job.

Rollover buttons are spazzing out!

  • # August 27, 2008 at 5:09 pm

    Website: http://studentseatfree.com/brian/

    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.

    Thoughts?

    HTML:

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



    CSS:

    Code:
    * { 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}

    Thanks!

    box
    # August 27, 2008 at 6:48 pm

    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.

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