My ajax - Backwards compatible in IE7?

If anyone who has IE 8, has a second could you take a look at http://thegearvault.com/

and check out what happens after you click 'larger image' and the ajax viewer loads at:
http://thegearvault.com/index.php?main_page=product_info&cPath=65&products_id=211

in both IE8 and compatibility view/IE7.

I want the page to look like it does in IE8 (4 columns on the index page, and no space on the side skirts in the product info page). However IE7 wont play nice.

Here's my CSS also.

The issue it that with padding, you are really to wide at 4 across.

This

<div class="centerBoxContentsNew centeredContent back" style="width:25%;">

Cannot fly because of the padding, need to reduce the padding or the %, as 4 x 25% = 100% w/ no respect for the padding.

What do you have in
Configuration >> Index Listing >> New Products Columns per Row

In any case the 25% needs to be like 22 or 23% and make the images just a hair smaller.

~Melanie

I have "4" selected in Configuration >> Index Listing >> New Products Columns per Row.

changing the image size and number of columns is a last resort as the client want the site the way it displays in ie8, but if I must I will.

However, Any Idea why the left margin increases so much in ie7? I think if I could get my centerBoxWrapper to move to the left I could make it work, but for some reason it's about 50px too far to the right in ie7 and I can't figure out why.

Try this http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=493

~Melanie

Sorry I'm confused, So i use their version of html_header and just add an ie7_stylesheet.css to the includes/templates/classic/css directory?

will ie7 still be detected if I'm in ie8's compatibility view?

nvm figured that out... :lamo:

Any idea whats going on on the product info page?

Posted this fix on the zen lightbox forum, figured I should post it here as well

For some reason zen lightbox likes to resize my tables in IE7... the soluction;

adding

.tableClass{
table-layout: fixed;
}

to the specific css.