Try the Demo

Magento

Magento Forum

   
Grid View Broken After Upgrade to 1.1.6 - SOLVED! 
 
yaani
Member
 
Total Posts:  56
Joined:  2008-08-13
 

After I upgraded to 1.1.6 the grid view for products now displays in a single vertical column instead of 3 ni a row.

Can anyone tell me why it is doing this? Did my upgrade not complete successfully? The product detail page shows the main product image shifter half way down the page also.

Is anyone else having these problems after upgrading to 1.1.6?

Thanks

 
 
Posted: September 22 2008
   |  top
 
Magento Community Magento Community
Magento Community
Magento Community
 
notzippy
Member
 
Avatar
Total Posts:  61
Joined:  2008-07-07
 

You did not update your css
You need the following in boxes.css

/* List Type */
.listing-type-list .listing-item { border-top:1px solid #D9DDE3; padding:12px 10px; }
.listing-type-list .product-image { float:left; width:135px; }
.listing-type-list .product-shop { width:305px; }
.listing-type-list .product-shop .description { margin:.5em 0 1.2em 0; }
.listing-type-list .product-shop .price-box { float:left;text-align:left; white-space:nowrap; margin:3px 13px 5px 0; padding:0; }
.listing-type-list .product-shop .form-button {margin:0.5em 0 0; }
.listing-type-list .product-shop .product-reviews { margin:15px 0; font-size:.95em; }
.listing-type-list .product-shop .product-reviews a, .listing-type-list .product-shop .product-reviews a:hover { color:#6e6969; }
.listing-type-list .listing-item .rating-box { margin-bottom:6px; }

/* Grid Type *\/
.listing-type-grid td { width:33%; text-align:left; }
.listing-type-grid .add-to-compare { display:block; margin:5px 0; background:url(../images/icon_add_to_compare.gif) no-repeat 0 50%; padding-left:22px; color:#6e6969; font-weight:bold; }
.listing-type-grid .rating-box { float:left; margin-left:0; margin-right:5px; }
.listing-type-grid .actions { margin:10px 0; text-align:center; }*/

/* Grid Type */
.listing-type-grid { background:url(../images/bkg_products-grid3.gif) 0 0 repeat; }
.listing-type-grid .grid-row { border-bottom:1px solid #d9dde3; }
.listing-type-grid li.item { float:left; width:138px; padding:12px 10px; line-height:1.6em; overflow:hidden; }
.listing-type-grid .last { border-bottom:0; }
.listing-type-grid .product-image { text-align:center; }
.listing-type-grid .rating-box { float:left; margin-left:0; margin-right:5px; }
.listing-type-grid .actions { margin:10px 0; text-align:center; }

 
 
Posted: September 22 2008
   |  top  |  # 1 
 
Magento Community Magento Community
Magento Community
Magento Community
 
yaani
Member
 
Total Posts:  56
Joined:  2008-08-13
 

I had a hard time figuring out what was missing/different in my boxes.css file so I renamed it & then uploaded the boxes.css file from the 1.1.6 version & the photo on the main product page displays correctly & the grid view displays 3 products per horizontal line.

Thank You for your help notzippy!

 
 
Posted: September 22 2008
   |  top  |  # 2 
 
Magento Community Magento Community
Magento Community
Magento Community
 
benfrain.com
Sr. Member
 
Total Posts:  142
Joined:  2008-08-15
 

Mmm, notzippy - your solution has partially worked for me (thanks for that!) but, for some odd reason, the site I’m building now shows a row of three, then a gap of two products, and then the rest.

You can see what I mean by looking here: http://www.site.com/magento/index.php/pcs/grade2-pc-systems?mode=grid

It’s not to do with boxes.css as I have tried uploading the 1.1.6 default CSS in and whilst other things change, that doesn’t.

Any thoughts why this might be?

 
 
Posted: October 3 2008
   |  top  |  # 3 
 
Magento Community Magento Community
Magento Community
Magento Community
 
notzippy
Member
 
Avatar
Total Posts:  61
Joined:  2008-07-07
 

Its the browsers are being to smart. Think of your items as blocks with different heights. When the browser renders them it tries to pack the blocks to the top so if one of your blocks has a different height it may stick your next row in that slot.

I added a fixed height for my “.listing-type-grid li.item” of about 385px;

z

 
 
Posted: October 3 2008
   |  top  |  # 4 
 
Magento Community Magento Community
Magento Community
Magento Community
 
benfrain.com
Sr. Member
 
Total Posts:  142
Joined:  2008-08-15
 

notzippy - thanks, you are a CSS Ninja, 10th dan smile

That sorted it.

 
 
Posted: October 3 2008
   |  top  |  # 5 
 
Magento Community Magento Community
Magento Community
Magento Community
 
notzippy
Member
 
Avatar
Total Posts:  61
Joined:  2008-07-07
 

np, I was stumped a while myself - thank the makers of firebug…

z

 
 
Posted: October 3 2008
   |  top  |  # 6 
 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top
 
I want to upgrade database tables without losting data.
Manually Update Database?