Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

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

 
Magento Community Magento Community
Magento Community
Magento Community
 
notzippy
Member
 
Avatar
Total Posts:  63
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:leftwidth: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:leftwhite-space:nowrapmargin:3px 13px 5px 0padding:0}
.listing-type-list .product-shop .form-button {margin:0.5em 0 0}
.listing-type-list .product-shop .product-reviews { margin:15px 0font-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.gif0 0 repeat}
.listing-type-grid .grid-row { border-bottom:1px solid #d9dde3; }
.listing-type-grid li.item { float:leftwidth:138pxpadding:12px 10pxline-height:1.6emoverflow:hidden}
.listing-type-grid .last { border-bottom:0}
.listing-type-grid .product-image { text-align:center}
.listing-type-grid .rating-box { float:leftmargin-left:0margin-right:5px}
.listing-type-grid .actions { margin:10px 0text-align:center}
 
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!

 
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?

 
Magento Community Magento Community
Magento Community
Magento Community
 
notzippy
Member
 
Avatar
Total Posts:  63
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

 
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.

 
Magento Community Magento Community
Magento Community
Magento Community
 
notzippy
Member
 
Avatar
Total Posts:  63
Joined:  2008-07-07
 

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

z

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top