Different Width in Safari and Chrome WordPress
- REFUNDED
Am using WP ecommerce plugin and there's some sizing problem in my shopping cart in Safari and Chrome. Firefox looks just like what i want.
As you can see here in attached the first is firefox, second is Safari and third is Chrome. The quantity, price and the pricing are totally different positions and the checkout button and the clear cart button is a bit not inline.
The coding of the shopping cart as the following. I believe it's the webkit problem and need your help:
<?php if(isset($cart_messages) && count($cart_messages) > 0) { ?>
<?php foreach((array)$cart_messages as $cart_message) { ?>
<span class="cart_message"><?php echo $cart_message; ?></span>
<?php } ?>
<?php } ?>
<?php if(wpsc_cart_item_count() > 0): ?>
<div class="shoppingcart">
<table>
<thead>
<tr>
<th id="product" colspan='2' width="50%"><?php _e('Product', 'wpsc'); ?></th>
<th id="quantity" width="10%"><?php _e('Qty', 'wpsc'); ?></th>
<th id="price" width="20%"><?php _e('Price (in USD)', 'wpsc'); ?></th>
<th id="remove" width="20%"> </th>
</tr>
</thead>
<tbody>
<?php while(wpsc_have_cart_items()): wpsc_the_cart_item(); ?>
<tr>
<td colspan='2' class='product-name'><a href="<?php echo wpsc_cart_item_url(); ?>"><?php echo wpsc_cart_item_name(); ?></a></td>
<td><?php echo wpsc_cart_item_quantity(); ?></td>
<td><?php echo wpsc_cart_item_price(); ?></td>
<td class="cart-widget-remove"><form action="" method="post" class="adjustform">
<input type="hidden" name="quantity" value="0" />
<input type="hidden" name="key" value="<?php echo wpsc_the_cart_item_key(); ?>" />
<input type="hidden" name="wpsc_update_quantity" value="true" />
<input class="remove_button" type="submit" />
</form></td>
</tr>
<?php endwhile; ?>
</tbody>
<tfoot>
<tr class="cart-widget-total">
<td class="cart-widget-count">
<?php printf( _n('%d item', '%d items', wpsc_cart_item_count(), 'wpsc'), wpsc_cart_item_count() ); ?>
</td>
<td class="pricedisplay checkout-total shoppingcartpad" colspan='4'>
<?php _e('Total', 'wpsc'); ?>: <?php echo wpsc_cart_total_widget( false, false ,false ); ?><br />
<small><?php _e( 'excluding shipping' ); ?></small>
</td>
</tr>
<tr>
<td class="shoppingcartpad1" id='cart-widget-links' colspan="4">
<form class="myButton"?> <a target="_parent" href="<?php echo get_option('shopping_cart_url'); ?>" title="<?php _e('Checkout', 'wpsc'); ?>" class="gocheckout"><?php _e('Checkout', 'wpsc'); ?></a> </form>
</td>
<td class="shoppingcartpad2">
<form action="" method="post" class="clearButton">
<input type="hidden" name="wpsc_ajax_action" value="empty_cart" />
<a target="_parent" href="<?php echo htmlentities(add_query_arg('wpsc_ajax_action', 'empty_cart', remove_query_arg('ajax')), ENT_QUOTES, 'UTF-8'); ?>" class="emptycart" title="<?php _e('Empty Your Cart', 'wpsc'); ?>"><?php _e('Clear cart', 'wpsc'); ?></a>
</form>
</td>
</tr>
</tfoot>
</table>
</div><!--close shoppingcart-->
<?php else: ?>
<p class="empty">
<?php _e('Your shopping cart is empty', 'wpsc'); ?><br />
<a target="_parent" href="<?php echo get_option('product_list_url'); ?>" class="visitshop" title="<?php _e('Visit Shop', 'wpsc'); ?>"><?php _e('Visit the shop', 'wpsc'); ?></a>
</p>
<?php endif; ?>
<?php
wpsc_google_checkout();
?>
Thanks!
Answers (1)
Kannan C answers:
Can you post the site url to check?
Eric Looi comments:
Sure: [[LINK href="http://www.singpetra.com/products/gospel-album/my-perfect-journey/"]][[/LINK]]
Add some products in and you will see the problem.
Eric Looi comments:
The link doesn't work. Anyhow, this is the link:
http://www.singpetra.com/products/gospel-album/my-perfect-journey/
Kannan C comments:
Try remove the colspan from all tds and set table width to 100%
example
<table width="100%">
<tr>
<td width="50%">
<td width="10%">
<td width="20%">
<td width="20%">
</tr>
</table>
Kannan C comments:
i forget to close the tds
<td width="50%"></td>
Kannan C comments:
this part is wrong
<tfoot>
<tr class="cart-widget-total">
<td class="cart-widget-count">
<?php printf( _n('%d item', '%d items', wpsc_cart_item_count(), 'wpsc'), wpsc_cart_item_count() ); ?>
</td>
<td class="pricedisplay checkout-total shoppingcartpad" colspan='4'>
<?php _e('Total', 'wpsc'); ?>: <?php echo wpsc_cart_total_widget( false, false ,false ); ?><br />
<small><?php _e( 'excluding shipping' ); ?></small>
</td>
</tr>
<tr>
<td class="shoppingcartpad1" id='cart-widget-links' colspan="4">
<form class="myButton"?> <a target="_parent" href="<?php echo get_option('shopping_cart_url'); ?>" title="<?php _e('Checkout', 'wpsc'); ?>" class="gocheckout"><?php _e('Checkout', 'wpsc'); ?></a> </form>
</td>
<td class="shoppingcartpad2">
<form action="" method="post" class="clearButton">
<input type="hidden" name="wpsc_ajax_action" value="empty_cart" />
<a target="_parent" href="<?php echo htmlentities(add_query_arg('wpsc_ajax_action', 'empty_cart', remove_query_arg('ajax')), ENT_QUOTES, 'UTF-8'); ?>" class="emptycart" title="<?php _e('Empty Your Cart', 'wpsc'); ?>"><?php _e('Clear cart', 'wpsc'); ?></a>
</form>
</td>
</tr>
</tfoot>
you have only 2 tds in tfoot which should be 4 as you have in other rows. put empty tds inside <tfoot></tfoot>
Eric Looi comments:
Where should i put the tds? Should i try remove the colspan then?
Eric Looi comments:
Removing and adding the table width="100%" doesn't work. The style is not right at all.
Eric Looi comments:
There are 4 tds in the tfoot. Check it again. Nothing wrong there.
Eric Looi comments:
I got the problem solved by my own. :)