38 users online (0 members and 38 guests)  


  Results 1 to 6 of 6

Related

  1. Tables and Images    Forum: Myspace Forum
    Replies: 0
  2. Jumping letters    Forum: Graphics Forum
    Replies: 1
  3. Replies: 2
  4. Replies: 7
  1. #1
    tjanson's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2004
    Posts
    14

    Jumping Images with tables and CSS

    Can someone please put me out of my misery? This is a simplified example of my problem:

    http://www.cvcg.net/arrgh.html

    The problem is that the images jump when rolled over. I've tried setting postion:fixed, and playing with padding and margins within style sheet all to no avail.

    My intention is to create a rollover and onstate effect for the smaller image.

    Apologies for the newbie-ness of the question.

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there tjanson,

    and a warm welcome to these forums

    The 'jumpy' effect is caused by the hover which adds a border.
    This pushes the item away from adjacent cells.
    To cure this add this to your 'css'...
    Code:
    td a:link,td a:visited {
         border: 1px solid #000000;
     }
    ...this is a border the same color as the background, thereby stopping the movement.

    coothead

  3. #3
    tjanson's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2004
    Posts
    14
    I've implemented your suggestion and while the images are staying put, I'm not getting the hover box that I was hoping for. It could be the last glass of wine from dinner, but I'm not following. More help?

    http://www.cvcg.net/arrgh.html

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there tjanson,

    Try one more refinement...
    Code:
    td a:link, td a:visited {
         display:block;
         border: 1px solid #000000;
     }
    td a:hover {
         display:block;
         border: 1px solid #807d7d;
     }
    coothead

  5. #5
    tjanson's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2004
    Posts
    14

    Thanks!

    It looks great! Exactly what I was looking for. Thanks so much for your help.

    -tjanson

  6. #6
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there tjanson,

    you're welcome

    coothead



Tags for this Thread