Can't Center in Chrome

lowpriceskates
lowpriceskates used Ask the Experts™
on
This is driving me crazy.
I can't center a table within a div in Google Chrome/Safari.
I have it working in Firefox and IE.

Example:
http://www.lowpriceskates.com/quad-speed-skates.aspx
The 5-star rating below the product price and above the "more info" button is left justified in Chrome and I can't center it.

I added these two lines to my css file and it fixes the problem in IE and FF:
.product-list-rating {text-align:center !important;}
table.rating-container {display:inline !important;}

This is the table with the class "rating-container" inside of the div "product-list-rating".
This is a NetSol shopping cart so I can't edit the HTML any. I can only add my own CSS and can't change the IDs or classes of anything.
Please help! Thanks!!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
try with applying width attribute...in div class

like this..

.product-list-rating {text-align:center !important; width:100%;}

Author

Commented:
That didn't work. I think I found a workaround, though.
I added this:
@media screen and (-webkit-min-device-pixel-ratio:0) {.product-list-rating {margin-left:45px;}}

That just targets webkit and pushes it over and seems to work.
No need to target webkit.  Update the following style in your stylesheet:

table.rating-container


REMOVE:
display: inline;

ADD:
margin: 0 auto;

Author

Commented:
Yes!!!!! That works perfectly. Thank you!!!!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial