IE issues with alignment

[Anneli]

I have customized the classic template and made all the changes I need to. Everything looks good in Firefox, but when I go to IE, the images are not aligning properly on a couple of pages. For example, the first page with images at the bottom (cirlces) should all be in a row.

The site is at http://www.anneli.tildeshop.com/zencart

Any advice would be soooo appreciated!

[Brian1234]

IE is probably adding some padding (or margin, I forget) ... a common CSS issue with IE. And, since you have (for your example) 3 items set to 33% width each, the total width is wider than your container forcing it to wrap around.

[kuroi]

.centerColumn {float:left; width:670px}

This is happening because the two browser engines are interpreting the relationships between the different elements on your page differently. FF is calculating the 33% relative to the indexCategories div but IE is calculating it relative to the surrounding table cell.

The cause of this discrepancy is most likely some complex and subtle stuff concerning what's in the document flow (the categoryListBoxContents are out as they are floated. Most of the rest is in).

You can force them to work consistently by adding a float to the .centerColumn class and giving it an explicit width (665px seems to work nicely).

But do check that it doesn't mess up other pages (if so you may prefer to apply the changes to the #indexCategories div instead) and works in IE6 (I tested it in IE7).

[landl07]

Thank you for your help in this! I added this to my stylesheet and my sites have never looked so perfectly aligned. :) Thank you!