41 users online (0 members and 41 guests)  


  Results 1 to 5 of 5

Related

  1. Replies: 16
  2. Rollover problem    Forum: Javascript Forum
    Replies: 4
  3. rollover and the like    Forum: HTML Forum
    Replies: 0
  4. SVG Rollover graphics    Forum: Graphics Forum
    Replies: 7
  5. Rollover Effect    Forum: HTML Forum
    Replies: 12
  1. #1
    Darkestlight's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2006
    Location
    New York, NY
    Posts
    4

    CSS Rollover display

    Hello everyone. I'm new to these forums and slightly new to web design. What that means is that I'd like to be a webmaster-but I can't ever seem to make somethIng look nice, or code well .


    Ok, so here's my problem.

    The page that has this problem is here...

    http://quietstorm.evielution.com/Storm.html

    As you can prolly guess, the image is also a set of links. You can also guess that I love Thundercats.

    In Firefox, the links work, but the rollovers don't occur.

    In IE however...they work fine. LInks, Rollovers, the whole shebang-even the scrollbars have the color assignment {I don't care about the scrollbar color as much as I do the rollover currently.}

    Here is the code that deals with the pictures-and (if possible) I would love for someone to aid in streamlining my CSS for me-I have a feeling its too messy and cluttered.

    #sketch {
    background-image: url(images/Tcats-model.png);
    height: 800px;
    width: 528px;

    }

    a#Will { top: 63px; left: 189px; width: 163px; height: 190px; }
    a#Random { top: 398px; left: 10px; width: 179px; height: 310px; }
    a#Storm2 { top: 253px; left: 189px; width: 163px; height: 520px; }
    a#Speed { top: 130px; left: 10px; width: 179px; height: 268px; }
    a#Col { top: 217px; left: 352px; width: 182px; height: 181px; }


    a#Will:hover { background-image: url(images\P_model.png); }
    a#Random:hover { background-image: url(images\W_model.png); }
    a#Col:hover { background-image: url(images\T_model.png); }
    a#Storm2:hover { background-image: url(images\L_model.png); }
    a#Speed:hover { background-image: url(images\C_model.png); }

    a#Will:hover,
    a#Random:hover,
    a#Col:hover,
    a#Storm2:hover,
    a#Speed:hover { border: none; }

    Now, I have the second set of the hover syntax there because the images will hang in IE if I don't have it there.

    Any help will be greatly appreciated. Have a good one.

  2. #2
    Darkestlight's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2006
    Location
    New York, NY
    Posts
    4

    Re: CSS Rollover display

    Alright, quick note:

    The rollovers began to work once I scrapped the stylesheet, and rewrote it. Why browsers do that, I don't know.

    But, there's a padding issue on Firefox now, the rollover images not coming over the main image seamlessly.

  3. #3
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Re: CSS Rollover display

    I've not got time to check just now, but I'm sure there's a few good examples of cross-browser css-only seamless rollovers at CSS Play

  4. #4
    Darkestlight's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2006
    Location
    New York, NY
    Posts
    4

    Re: CSS Rollover display

    I've been to this site before, and it has helped me in the past. I believe my problem however, is that the larger image itself, is moving-when corssing browsers. The links are all in the same position-which is why the offset occurs. Does Firefox have a different screen padding isue I'm not aware of?

    If you switch from IE to Firefox, you'll see the large image move up and to the left-quite odd actually...

  5. #5
    Darkestlight's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2006
    Location
    New York, NY
    Posts
    4

    Re: CSS Rollover display

    Dang, I wanted to just edit my previous message. Sorry about that. I was going to say that

    1) IE stays still. However, Firefox moves my background image up 6 pixels and left 2 pixels-but the link boundaries stay exactly the same cross browser.

    2) Firefox dosen't like < p > in my text, as removing them - and replacing them with < br >caused Firefox to considerably reduce the amount of stretching it was doing with the text.. IE didn't do a thing.

    3) I fixed any position issues I spotted, but still no dice.



Tags for this Thread