page elements jump around

Discussion in 'CSS' started by johnnyblotter, Sep 18, 2008.

  1. #1
    Hi all,

    I am having an issue on a site which features a lot of images. What's happening is, when the images change size, the left nav is jumping around slightly either up or down. I've experimented by making the left and center divs absolute, but no dice...the thing won't stay still...on both FF and IE6.

    Anyone have any ideas how to fix this?

    http://www.jontakiff.com/kiki_dennis...equamain1.html

    Thanks in advance

    -Jon
     
    johnnyblotter, Sep 18, 2008 IP
  2. ClickMedia

    ClickMedia Banned

    Messages:
    104
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Please paste the link correctly.

    Just check the total page width and inner div's width.
     
    ClickMedia, Sep 18, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Basically though, you need to make the sizes of the hovered thingies the same between hover and normal, to prevent jumping.

    For instance I once had a row of images, and a border was to appear when hovered over (or focussed). The only way to stop jumping there was to give the no-border images some padding equal to what the border was going to be, and when the border showed up, the padding went back to 0.
     
    Stomme poes, Sep 19, 2008 IP
  4. johnnyblotter

    johnnyblotter Peon

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    johnnyblotter, Sep 19, 2008 IP
  5. johnnyblotter

    johnnyblotter Peon

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    johnnyblotter, Sep 19, 2008 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    If Rightside isn't exactly the same width on each and every page, then there' ll be jumping. To tell the truth it's hardly noticable, at least on FF3 Ubuntu.

    Hmmm... what you want to do is stick a big ugly background colour on each chunk of page-- the body, the left column (each class seems to sit in a different place so I don't think the image at the right has anything to do with it as they're both floated left) and the Rightside. Click between pages and use a ruler marker to mark where the left side of left column is on every page. That's what seems to be doing the shifting.
    Not sure what keeps them away from the left side of the page, maybe container, in which case if you have a centered container its total width may be changing, which will shift it from side to side because auto-margins will adjust where something sits as the width changes.
    So also give a background colour to the container which is centered with auto-margins and measure its width (you can get Web Developer toolbar for Firefox and it comes with a Ruler under Miscellaneous).
     
    Stomme poes, Sep 22, 2008 IP