Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer CSS mouseover background issue

    For some strange reason the entire background on the NAV buttons isn't changing on mouseover with IE...firefox works great. Any ideas? Link is below. Thanks in advance.

    http://www.manliusvillage.org/test/index.html

    Code:
    #navigation{
    height:2.2em;
    line-height:2.05em;
    width:758px;
    margin:0 1px;
    background:#578bb8;
    color:#ffffff;
    }
    
    #navigation li{
    width:125px;
    float:left;
    height: 2.1em;
    list-style-type:none;
    text-align:center;
    border-right:1px solid #ffffff;
    border-bottom:1px solid #ffffff;
    white-space:nowrap;
    }
    
    #navigation li a{
    display:block;
    padding:0 10px;
    font-size:0.8em;
    font-weight:normal;
    text-transform:uppercase;
    text-decoration:none;
    background-color:inherit;
    color: #ffffff;
    }
    
    #navigation li, #navigation .selected a{
    height: 2.1em;
    }
    
    * html #navigation a {width:1%;}
    
    #navigation .selected,#navigation a:hover{
    background-color:#80b0da;
    color:#ffffff;
    text-decoration:none;
    }
    Last edited by and3109; 12-25-2006 at 09:16 AM.

  • #2
    New Coder
    Join Date
    Dec 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    anybody?

  • #3
    ess
    ess is offline
    Regular Coder
    Join Date
    Oct 2006
    Location
    United Kingdom
    Posts
    866
    Thanks
    7
    Thanked 30 Times in 29 Posts
    You should use the following declarations

    Code:
    #navigation{
    height:2.2em;
    line-height:2.05em;
    width:758px;
    margin:0 1px;
    background:#578bb8;
    color:#ffffff;
    }
    
    #navigation li{
    width:125px;
    float:left;
    height: 2.1em;
    list-style-type:none;
    text-align:center;
    border-right:1px solid #ffffff;
    border-bottom:1px solid #ffffff;
    white-space:nowrap;
    }
    
    #navigation a:link, #navigation a:visited, #navigation a:active {
    display:block;
    padding:0 10px;
    font-size:0.8em;
    font-weight:normal;
    text-transform:uppercase;
    text-decoration:none;
    background-color:inherit;
    color: #ffffff;
    }
    #navigation a:hover {
    background-color: yellow; /*enter color here */
    }
    Basically, you should declare a:link, a:visited, a:active in one block, and then declare a:hover in a seperate block to get the hover effect.

    Good luck
    Ess

  • #4
    New Coder
    Join Date
    Dec 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmmm...I appreciate your reply ess. However, my attempt at the above still outputs the same result.


  •  

    Posting Permissions

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