[user1]

Happy new year everybody!

Originally Posted by gb2world

It appears the module is adding in-line css, probably with javascript, after you rate something that is over writing your width setting to be style="width: auto;" It will not center with this in-line code.

At this point - you are going to have to experiment to see if the writers of this code have a reason for adding this in-line style for rated products. You can use webmaster mode to find the template where they are doing this. You can take it out and see the impact. You can also use Firefox/Firebug to see the css that is controlling all this and experiment using these tools. You can also try creating your own div with width and margin set to center it, and place it around the cre-views-rating-box div. This is essentially what Ashley suggested above - only use a div with width, not a td.

First of all accept my apologies for not answering for so many days.

After a lot of trial and error I finally found the solution. All I need now is to see if all pages appear correctly. And this has to be done in all browsers.

I 'd like you to check it and see if there is any change that may affect other things.

So here is the way to do it:


I opened the skin1/main.css version:

/*
$Id: main.css,v 1.269.2.3 2009/11/10 15:58:44 joy Exp $
vim: set ts=2 sw=2 sts=2 et:
*/

and made the following changes:

1. Replaced this

.products .price-row {
  margin: 0px;
  padding: 0px;
  text-align: left;
}  

with this

.products .price-row {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

2. Replaced this

.products .buy-now .quantity {
  height: 30px;
  white-space: nowrap;
  vertical-align: middle;
}

with this

.products .buy-now .quantity {
  height: 30px;
  white-space: nowrap;
  vertical-align: middle; 
  text-align: center;
}

3. Replaced this

.products-table td.product-cell-buynow .button-row {
  text-align: left;
  margin: 9px 0 5px;
}

with this

.products-table td.product-cell-buynow .button-row {
  text-align: center;
  margin: 9px 0 5px;
}

4. Replaced this

.products-table .image {
  padding: 0px;
  margin: 5px 0px;
  text-align: left;
}

with this

.products-table .image {
  padding: 0px;
  margin: 5px 0px;
  text-align: center;
}

5. Replaced this

.products-table .sku {
  margin-top: 5px;
}

with this

.products-table .sku {
  margin-top: 5px;
  text-align: center;
}

6. Replaced this

.creviews-rating-box {
  margin-top: 5px;
  padding-bottom: 7px;
}

with this

.creviews-rating-box {
  margin: 0px auto;
  padding-bottom: 7px;
  width: 100px;
  text-align: left;
}

You may wonder why I added this "text-align: left". Well, If this doesn't exist for some reason the rating box appears out of place in Internet Explorer. I don't know why but this fixed it. And since it doesn't mess anything else I left it.


7. Replaced this

.creviews-vote-bar ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  overflow: visible;
}

with this

.creviews-vote-bar ul {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0 auto;
overflow: visible;
padding: 0;
width: 100px;
}

8. Replaced this

.creviews-rating {
  font-size: 10px;
  color: #8a8a8a;
}

with this

.creviews-rating {
  font-size: 10px;
  color: #8a8a8a;
  text-align: center;
}

9. Replaced this

div.market-price {
  margin-top: 4px;
}

with this

div.market-price {
  margin-top: 4px;
  text-align: center;
}

10. Replaced this

.products-table .product-cell {
  background: #ffffff none;
  padding: 0px;
  vertical-align: top;
}

with this

.products-table .product-cell {
  background: #ffffff none;
  padding: 0px;
  vertical-align: top;
  text-align: center;
}

There are some more changes to be made (for example, if you use taxes you may need to center align the taxes row) but I won't go in further details right now.

Thank you all for helping with one way or another!
Andreas