Help please, What's wrong with my CSS Rollover's?

Discussion in 'CSS' started by clade, May 12, 2009.

  1. #1
    Hi,

    The CSS rollover image for the header buttons loads way after the entire page has loaded. and sometimes you have to move your mouse over the button, and wait several seconds before the rollover button is shown. This doesn't happen with other sites such as myspace.com and lookbook.nu

    Please help, our site is temporarily at www.bakat.iflair.net

    Really urgent, I don't think the programmers are able to fix this, the header is so buggy. :(

    edit: The CSS rollover's also doesn't work with IE and old IE browsers, but Myspace.com and lookbook.nu work just fine.
     
    clade, May 12, 2009 IP
  2. normalfx

    normalfx Peon

    Messages:
    111
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    It's work on IE7 but IE6. i think that's not CSS bug. That's the way CSS working when you've separate graphic at normal status and hover status it need to taking time to load when hover. To solve this problem use one image that have both normal and hover status on it and using background position to control the buttons.
     
    normalfx, May 14, 2009 IP
    clade likes this.
  3. OmegaMan

    OmegaMan Peon

    Messages:
    12
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yeah, like normalfx says, you gotta have the two images in a single file.

    Use css this way to make it look okay.

    .button {
    background: url('your-image') top left;
    }


    .button:hover {
    background: url('your-image') bottom left;
    }
     
    OmegaMan, May 15, 2009 IP
    clade likes this.
  4. clade

    clade Peon

    Messages:
    548
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Lots of thanks m8!
     
    clade, May 15, 2009 IP
  5. nudea

    nudea Peon

    Messages:
    179
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #5
    nudea, May 16, 2009 IP
  6. caffeinatedworld

    caffeinatedworld Peon

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Also you can preload images with simple CSS - add a code with display: none where you load the images with simple <img> tags - works for me :)
     
    caffeinatedworld, May 21, 2009 IP