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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Hover state doesn't works in FF not in IE

    I'm new to CSS and I just got my design starting to look the way I want it to, but I ran into a problem with a CSS rollover. In FF the rollover in my nav works like any other rollover should, roll over and new image appears, roll out original image appears, but in IE when I rollover the image appears, but when I roll out the image sticks! Anyone have an suggestions?

    website for visual - www.justinrbamberg.com

    Heres my code:

    Code:
    #home { background-image: url(../images/home_normal.jpg); background-repeat: no-repeat; position: absolute; left: 300px; width: 63px; height: 102px; }
    #home a:hover { background-image: url(../images/home_over.jpg); width: 63px; height: 102px; }
    #home a{text-decoration:none; display:block; width:63px; height:102px;}
    
    #about { background-image: url(../images/about_normal.jpg); background-repeat: no-repeat; position: absolute; left: 363px; width: 77px; height: 102px; float: left; }
    #about a:hover { background-image: url(../images/about_over.jpg); width: 77px; height: 102px; float: left; }
    #about a{ text-decoration:none; display:block; width:77px; height:102px; float: left; }
    
    #port { background-image: url(../images/port_normal.jpg); background-repeat: no-repeat; position: absolute; left: 440px; width: 77px; height: 102px; float: left; }
    #port a:hover { background-image: url(../images/port_over.jpg); width: 77px; height: 102px; float: left; }
    #port a{ text-decoration:none; display:block; width:77px; height:102px; float: left; }
    
    #contact { background-image: url(../images/contact_normal.jpg); background-repeat: no-repeat; position: absolute; left: 517px; width: 69px; height: 102px; float: left; }
    #contact a:hover { background-image: url(../images/contact_over.jpg); width: 69px; height: 102px; float: left; }
    #contact a{ text-decoration:none; display:block; width:69px; height:102px; float: left; }
    Thanks - jrbamberg

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    the order is:

    (a)
    a:link
    a:visited
    a:hover
    a:active

    so in your case swap the order of a and a:hover in your css.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that seems very simple, thanks.

  • #4
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, that didn't work. I swapped my a:hover and a in my code and I still seem to be having the same problem. Any other suggestions.

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    this seems to work:
    Code:
    #header #home { 
    position: absolute; 
    left: 300px; 
    width: 63px; 
    height: 102px; 
    background: url(http://www.justinrbamberg.com/images/home_normal.jpg) top left no-repeat
    }
    
    #header #home a { 
    background: transparent; 
    text-decoration:none; 
    display:block; 
    width:63px; 
    height:102px;
    }
    
    #header #home a:hover { 
    background: transparent url(http://www.justinrbamberg.com/images/home_over.jpg) top left no-repeat; 
    width: 63px; 
    height: 102px; 
    }
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #6
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok that seemed to work great. The only other thing that it is causing is my images take a bit longer to load up and they shouldn't at 0.8 kb? Any idea why? But thanks on getting them to work correctly.

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    I'm not seeing a delay, or maybe it's not that bad or I'm tired

    but add this to your <head>
    Code:
    <script type="text/javascript">
    function fixIE6flicker(fix) {
    	try {
    		document.execCommand("BackgroundImageCache", false, fix);
    	} catch(err) { }
    }
    fixIE6flicker(true);
    </script>
    It might be IE's caching issue. Ths has fixed it for me in the past.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #8
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for all your help.


  •  

    Posting Permissions

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