Need help with IE7 Display in Shopping Cart

[wpwdmama]

On the shopping cart page of http://www.rockymtngift.com , the right side cuts off in IE7 obscuring the remove from cart button. This is a very slight modification of the classic template. Looks fine in FF3 and IE8. I can't figure out where the problem is. I don't care about IE6 and below, but it needs to work in IE7. Anyone with any clues?

[niccol]

Internet explorer eh?

I think that this probably has to do with the fact that the table has a width of 100% which combined with borders, margins and padding is screwing IE up.

Just guessing because I don't run IE on this laptop.

If I am right then the way to check is to change the 100% to something smaller. To do this find a file called tpl_shopping_cart_default.php (includes/templates/yourtemplate/templates) and find the bit that reads:

<table  border="0" width="100%" cellspacing="0" cellpadding="0" id="cartContentsDisplay">
     <tr class="tableHeading">
        <th scope="col" id="scQuantityHeading"><?php echo TABLE_HEADING_QUANTITY; ?></th>
        <th scope="col" id="scUpdateQuantity">&nbsp;</th>

Change the 100% to 90% and see what happens. Sorry to be a bit vague but without a full version of ie7 it is hard to fault find

[niccol]

Also you could try changing this rule in the stylesheet.css

.centerColumn, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix {
	padding: 0.8em;
	}

I have a feeling that it is the padding that is causing the problem. Temporarily set the padding to 0 because the width is 100% so of the center column so adding in the padding IE7 thinks that the contents are wider than the container.

[wpwdmama]

Thanks! That worked great. I just wasn't sure where to find that table. Now the #cartSubTotal is too wide. Changing the width in percentages on that in the css doesn't work on a fluid layout. A window resize breaks it. Any hints on that?

[wpwdmama]

Ok, good enough. I hate IE's box model! Just added a wrapper div around the table and the SubTotal div. Set a width on it and reset the table to 100%. All is well.

[luckystar09]

I'm very interested! I would love to find out more.
script install

[wpwdmama]

It's easy. Just go to your tpl_shopping_cart_default.php (includes/templates/yourtemplate/templates) page and before the <table> tabe put in a <div> tag. Then go down to below the final </div> tag and put in another closing </div> tag. Set a class to it, and define the class in your css file. Upload it, and you're ready to go! PM me if you need more help.