Quirky IE 6 & 7 positioning problem.

[InLikeALion]

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?

 

[ChicoWeb]

IE doesn't like margin rights. I would start there. Looks like you have it on your content wrapper.

 

[subwarm]

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.

 

[InLikeALion]

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'?

 

[7on]

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.

 

[InLikeALion]

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.

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.

 

[7on]

I would apply it to the divs you have that float left, the pictures.

 

[InLikeALion]

I would apply it to the divs you have that float left, the pictures.

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.