Quirky IE 6 & 7 positioning problem.

Discussion in 'Web Design and Development' started by InLikeALion, Jun 23, 2008.

  1. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #1
    Here is an older project which doesn't have the cleanest code. One problem that I'm trying to solve is the positioning of the product pictures and their descriptions. In FF and Safari, they are correctly positioned beside eachother.

    http://pearlriverglassstudio.com/store_glass_art.html

    However, in IE 6 and 7, they alternate, like a checkerboard. You can see it in this pic from browsershots.org:

    I can't figure out what's causing it to wig-out. Any suggestions?
     

    Attached Files:

  2. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #2
    IE doesn't like margin rights. I would start there. Looks like you have it on your content wrapper.
     
  3. subwarm macrumors member

    subwarm

    Joined:
    Feb 4, 2003
    Location:
    Westchester, NY
    #3
    Take a look at this class:

    .medium-column {
    width: 237px;
    margin-left: 260px;
    }


    IE 6 uses a box model approach, the 260px margin-left call is probably blowing out the boundaries of the parent element (in this case the image set to float:left) and thus pushing it below the image. It's hard to test without having the full code for troubleshooting but that might be a good place to start.

    Good luck.
     
  4. InLikeALion thread starter macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #4
    Thanks you 2. If anyone else has any different suggestions, keep posting them. I'm going to see what I can do with the margins.

    Are you 2 saying the same thing about margins? Cause Chico sounds like he's saying my {margin-right: auto;} on the container div is what's screwing it up? But then Subwarm's suggestion "makes sense", even though I'm not sure how to position those rows of content without the margin left.

    Should I make the div "mainbody" be something like {position: relative;} and try absolutely positioning the ".medium-column"s with the correct left 'margin'?
     
  5. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #5
    Just a note as it looks like you fixed it.

    If you have a left margin and the div is floating left, you need a display:inline; so that IE6 doesn't glitchingly increase the margin.
     
  6. InLikeALion thread starter macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #6
    Jon, I don't know that I've fixed it. I simply matched the settings to another class I had that seemed to be working, but I haven't been able to upload it yet for test. Did you say that because I hadn't written back?

    When applying the display:inline; hack, I would apply it to the element that is being pushed down? In this case, the description column?

    thanks for the help.
     
  7. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #7
    I would apply it to the divs you have that float left, the pictures.
     
  8. InLikeALion thread starter macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #8
    Thanks. I tend to over-think things, and couldn't tell if you meant the item with the float attribute, or the item being effected by the attribute (the description <p>).

    EDIT: Jon - that did the trick. I just got the new browsershots.org pics of IE 6 and it seems to be perfect. Thank you very much.
     

Share This Page