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

Thread: CSS a:hover

  1. #1
    Regular Coder
    Join Date
    Jan 2008
    Posts
    334
    Thanks
    9
    Thanked 0 Times in 0 Posts

    CSS a:hover

    I'm having some trouble getting the styling just right on my nav bar. What the problem is when you hover on a link and the background changes there is like 1 inch of white that should be the hover background color that can't seem to get to be filled in.

    Here is my CSS code:
    Code:
    /* Main Them for site*/
    
    html {
    height:100%;
    padding:0px;
    overflow-x:auto;
    }
    
    body {
    background: url('/show/themes/maintheme/images/bg_try.gif') repeat;
    background-attachment:fixed;
    margin:0;
    padding: 0;
    height:100%;
    }
    
    #container {
    margin:auto;
    width:903px;
    height:100%;
    padding:0;
    }
    
    #content {
    background:#ffffff;
    font-size:12px;
    text-align:left;
    height:600px;
    padding:0px;
    overflow:auto;
    }
    
    #top_round {
    background:url('/show/themes/maintheme/images/round_pattern.gif') no-repeat;
    width:903px;
    height:13px;
    }
    
    #top {
    background: url('/show/themes/maintheme/images/bg_top.gif') repeat;
    width:903px;
    height:150px;
    padding:0px;
    }
    
    #recently {
    background-color:#000000;
    line-height:20px;
    font-size:11px;
    font-family:arial;
    width:100%;
    height:20px;
    color:#cccccc;
    text-align:center;
    margin-bottom:15px;
    border-bottom:2px solid #1B1B1B;
    }
    
    img {
    border:0px;
    width:auto;
    height:auto;
    }
    
    #nav {
    height:25px;
    border-bottom:1px solid #cccccc;
    background-color:#f1f1f1;
    line-height:25px;
    margin: 0;
    padding:0;
    }
    
    .menu a:link, .menu a:visited, .menu a:active {
    padding:0px 3px 0px 3px;
    text-align:center;
    display:inline-block;
    color:#333333;
    font-size:12px;
    font-weight:bold;
    font-style:normal;
    font-family:arial;
    background-color:#EEF0EE;
    height:25px;
    font-variant:normal;
    text-decoration:none;
    border-right:1px solid #cccccc;
    border-left:0px;
    }
    
    .menu a:hover {
    padding:0px 3px 0px 3px;
    text-align:center;
    display:inline-block;
    color:#333333;
    font-size:12px;
    font-weight:bold;
    font-style:normal;
    font-variant:normal;
    font-family:arial;
    background-color:#000000;
    height:25px;
    text-decoration:none;
    border-right:1px solid #cccccc;
    border-left:0px;
    }
    You can view the site here: http://reviewgaming.allinyourmind.net/show/

    Just hover you mouse over one of the menu links and keep a sharp eye and you'll notice that on the left side it doesn't fully fill in. Not to sure what is doing this.

    Thanks for the help.

  • #2
    New Coder
    Join Date
    Jun 2009
    Location
    Newcastle
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi Jon,

    This should fix your problem:

    Code:
    /* Main Them for site*/
    
    html {
    height:100%;
    padding:0px;
    overflow-x:auto;
    }
    
    body {
    background: url('/show/themes/maintheme/images/bg_try.gif') repeat;
    background-attachment:fixed;
    margin:0;
    padding: 0;
    height:100%;
    }
    
    #container {
    margin:auto;
    width:903px;
    height:100%;
    padding:0;
    }
    
    #content {
    background:#ffffff;
    font-size:12px;
    text-align:left;
    height:600px;
    padding:0px;
    overflow:auto;
    }
    
    #top_round {
    background:url('/show/themes/maintheme/images/round_pattern.gif') no-repeat;
    width:903px;
    height:13px;
    }
    
    #top {
    background: url('/show/themes/maintheme/images/bg_top.gif') repeat;
    width:903px;
    height:150px;
    padding:0px;
    }
    
    #recently {
    background-color:#000000;
    line-height:20px;
    font-size:11px;
    font-family:arial;
    width:100%;
    height:20px;
    color:#cccccc;
    text-align:center;
    margin-bottom:15px;
    border-bottom:2px solid #1B1B1B;
    }
    
    img {
    border:0px;
    width:auto;
    height:auto;
    }
    
    #nav {
    height:25px;
    border-bottom:1px solid #cccccc;
    background-color:#f1f1f1;
    line-height:25px;
    margin: 0;
    padding:0;
    }
    
    .menu a:link, .menu a:visited, .menu a:active {
    padding:0px 3px 0px 3px;
    text-align:center;
    display:block;
    float: left;
    color:#333333;
    font-size:12px;
    font-weight:bold;
    font-style:normal;
    font-family:arial;
    background-color:#EEF0EE;
    height:25px;
    font-variant:normal;
    text-decoration:none;
    border-right:1px solid #cccccc;
    border-left:0px;
    }
    
    .menu a:hover {
    padding:0px 3px 0px 3px;
    text-align:center;
    display:inline-block;
    color:#333333;
    font-size:12px;
    font-weight:bold;
    font-style:normal;
    font-variant:normal;
    font-family:arial;
    background-color:#000000;
    height:25px;
    text-decoration:none;
    border-right:1px solid #cccccc;
    border-left:0px;
    }

  • #3
    Regular Coder
    Join Date
    Jan 2008
    Posts
    334
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Cool. That was it. Not to sure why I didn't think of that. lol

    Thanks!

  • #4
    New Coder
    Join Date
    Jun 2009
    Location
    Newcastle
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    No problems dude


  •  

    Posting Permissions

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