Grow your CSS skills. Land your dream job.

IE CSS Hover & Selected States

  • # April 23, 2009 at 4:54 pm

    Hi all,
    I’m having some trouble with IE 7 and css hovers/selects. On my menu, when you hover over an item, a hover is applied that displays a border. When you’re on that page, the same blue border is solid (selected). This works perfectly in Firefox, but as usual IE is having some issues. First, IE does not want to display the hover border. I corrected this by adding a position: absolute; element. However, the selected state does not want to display. When the position: absolute is applied to the selected state, it appears, however, extends the entire length of the word and spacing. In addition, when hovered over, the selected state does not disappear, it is just pushed down. Here is the code in question:

    The Mark-Up:

    The CSS

    Code:
    #menu-right {
    float:right;
    padding-top:5px;
    }

    #menu-right ul {
    float:right;
    word-spacing:23px;
    }

    #menu-right li {
    display:inline;
    }

    #menu-right a {
    color:#fff;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    text-transform:uppercase;
    }

    #menu-right a:hover {
    position: relative;
    text-decoration:none;
    padding-bottom:17px;
    border-bottom:4px solid #26bcec;
    }

    .menu-item-select {
    text-decoration:none;
    padding-bottom:16px;
    border-bottom:4px solid #26bcec;
    color:#fff;
    }

    Any help would be greatly appreciated.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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