Home » Forums » Ubercart » Support

Strange Catalog html/css behavior

Submitted by end user on Tue, 04/29/2008 - 02:55
end user
Posts: 90
 Joined: 01/11/2008

Ran into a css border problem with table in the product grid view. I'm using RC 2 and having a problem with Vista Home Premium and FF 2.0.0.14

On this page http://www.pnwgardensupply.com/growshop/nutrients/green_planet some of the borders refuse to render for some reason. They do show up in IE and Opera.

This is what I have for css

.category-grid-products table {
  text-align: center;
  width: 100%;
}
.category-grid-products td {
  text-align: center;
  padding: 5px;
  border-right: 4px solid #000;
  border-bottom: 4px solid #000;
   border-left: 4px solid #000;
  border-top: 4px solid #000;
  background-color: #E8E6D7;

Second Problem.

If I disable the add to car button all the grid

<td>

are missing a closing

</td>

<div class="category-grid-products"><table><tr><td><span class="catalog_grid_title"><a href="/growshop/nutrients/green_planet/hydro_fuel_bloom_1l">Hydro FuelBloom 1L</a></span>
<span class="catalog_grid_image"><a href="/growshop/nutrients/green_planet/hydro_fuel_bloom_1l"><img src="http://www.pnwgardensupply.com/files/imagecache/product_list/files/hydrofuel_0.jpg" alt="" title=""  /></a></span>
<span class="catalog_grid_sell_price">$19.99</span>
<td>
<span class="catalog_grid_title"><a href="/growshop/nutrients/green_planet/hydro_fuel_bloom_24l">Hydro Fuel Bloom 24L</a></span>
<span class="catalog_grid_image"><a href="/growshop/nutrients/green_planet/hydro_fuel_bloom_24l"><img src="http://www.pnwgardensupply.com/files/imagecache/product_list/files/hydrofuel_2.jpg" alt="" title=""  /></a></span>
<span class="catalog_grid_sell_price">$269.99</span>
<td>
<span class="catalog_grid_title"><a href="/growshop/nutrients/green_planet/hydro_fuel_bloom_5l">Hydro Fuel Bloom 5L</a></span>
<span class="catalog_grid_image"><a href="/growshop/nutrients/green_planet/hydro_fuel_bloom_5l"><img src="http://www.pnwgardensupply.com/files/imagecache/product_list/files/hydrofuel_1.jpg" alt="" title=""  /></a></span>
<span class="catalog_grid_sell_price">$69.99</span>
</tr>
<tr
<td>
<span class="catalog_grid_title"><a href="/growshop/nutrients/green_planet/hydro_fuel_grow_1l">Hydro Fuel Grow 1L</a></span>
<span class="catalog_grid_image"><a href="/growshop/nutrients/green_planet/hydro_fuel_grow_1l"><img src="http://www.pnwgardensupply.com/files/imagecache/product_list/files/hydrofuel_4.jpg" alt="" title=""  /></a></span>
<span class="catalog_grid_sell_price">$19.99</span>
</tr>
</table>
</div>

Thanks
Arek
permalink #1 Tue, 04/29/2008 - 08:44
Lyle

Posts: 2008
 Joined: 08/07/2007
AdministratoreLiTe!

Whoops. The closing tag was inside an if block that was run when the add to cart form was displayed. I wouldn't be too surprised to learn that this messes up the borders of the empty cells as well. Find lines 1010 and 1011 of uc_catalog.module and switch them. In case we don't have the same line numbers, that's near the end of theme_uc_catalog_product_grid():

<?php
      else {
        $product_table .= drupal_get_form('uc_catalog_buy_it_now_form_'. $product->nid, $product);
      }
      $product_table .= '</td>';
    }
?>

to
<?php
      else {
        $product_table .= drupal_get_form('uc_catalog_buy_it_now_form_'. $product->nid, $product);
      }
    }
    $product_table .= '</td>';
?>

permalink #2 Tue, 04/29/2008 - 09:51
TR
Posts: 822
 Joined: 11/05/2007
Bug FinderFAQ ModeratorGetting busy with the Ubercode.

Anecdotally, I saw that problem once when I neglected to set the number of products per page to be a multiple of the number of items per row. I don't know whether that's just a coincidence, a side effect of the bug above, or for some other reason.

--

<tr>.

permalink #3 Tue, 04/29/2008 - 09:59
end user
Posts: 90
 Joined: 01/11/2008

Thanks.

That solved the missing closing tags but Firefox is still having problems rendering the borders.

Here's what the html looks like now. Seems FF can't render the css border properly when there are are missing td cells.

http://www.pnwgardensupply.com/growshop/nutrients/green_planet

<table>
<tr>
<td>
<span class="catalog_grid_title"><a href="/growshop/nutrients/green_planet/hydro_fuel_bloom_1l">Hydro Fuel Bloom 1L</a></span><span class="catalog_grid_image"><a href="/growshop/nutrients/green_planet/hydro_fuel_bloom_1l"><img src="http://www.pnwgardensupply.com/files/imagecache/product_list/files/hydrofuel_0.jpg" alt="" title=""  /></a></span><span class="catalog_grid_sell_price">$19.99</span>
</td>
<td>
<span class="catalog_grid_title"><a href="/growshop/nutrients/green_planet/hydro_fuel_bloom_24l">Hydro Fuel Bloom 24L</a></span>
<span class="catalog_grid_image"><a href="/growshop/nutrients/green_planet/hydro_fuel_bloom_24l"><img src="http://www.pnwgardensupply.com/files/imagecache/product_list/files/hydrofuel_2.jpg" alt="" title=""  /></a></span>
<span class="catalog_grid_sell_price">$269.99</span>
</td>
<td><span class="catalog_grid_title"><a href="/growshop/nutrients/green_planet/hydro_fuel_bloom_5l">Hydro Fuel Bloom 5L</a></span>
<span class="catalog_grid_image"><a href="/growshop/nutrients/green_planet/hydro_fuel_bloom_5l"><img src="http://www.pnwgardensupply.com/files/imagecache/product_list/files/hydrofuel_1.jpg" alt="" title=""  /></a></span>
<span class="catalog_grid_sell_price">$69.99</span>
</td>
</tr>
<tr>
<td>
<span class="catalog_grid_title"><a href="/growshop/nutrients/green_planet/hydro_fuel_grow_1l">Hydro Fuel Grow 1L</a></span>
<span class="catalog_grid_image"><a href="/growshop/nutrients/green_planet/hydro_fuel_grow_1l"><img src="http://www.pnwgardensupply.com/files/imagecache/product_list/files/hydrofuel_4.jpg" alt="" title=""  /></a></span>
<span class="catalog_grid_sell_price">$19.99</span>
</td>
</tr>
</table>

permalink #4 Tue, 04/29/2008 - 21:43
gash
Posts: 69
 Joined: 04/14/2008

I played with it in firebug, and it appears to boil down to the use of border collapse. This seemed to remedy it (at least for me).

In your CSS:

.category-grid-products table {
  border-collapse: separate; /* override inherited collapse */
  border-left: 4px solid black;
  border-top: 4px solid black;
  border-spacing: 0;
  text-align: center;
  width: 100%;
}
.category-grid-products td {
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  text-align: center;
  padding: 5px;
  background-color: #E8E6D7;
}

I hope that helps.

permalink #5 Tue, 04/29/2008 - 23:43
end user
Posts: 90
 Joined: 01/11/2008

Nice find! That helped remedy the problem.

permalink #6 Wed, 04/30/2008 - 01:52
gash
Posts: 69
 Joined: 04/14/2008

Glad to hear it!

permalink #7 Wed, 04/30/2008 - 08:36
Lyle

Posts: 2008
 Joined: 08/07/2007
AdministratoreLiTe!

Do you think this is a change that needs to be made to core?

permalink #8 Wed, 04/30/2008 - 10:27
end user
Posts: 90
 Joined: 01/11/2008

Lyle,

No sure if it should be as I don't know if this is a FF bug or UC problem. What I'd like to see is different css classes/id's assigned to maybe the top , middle and bottom rows of the catalog grid. This way people would have more control over the look.

permalink #9 Wed, 04/30/2008 - 11:06
gash
Posts: 69
 Joined: 04/14/2008

I believe it's an issue with how FF handles collapsed borders in tables w/ empty or absent table cells. If I'm not mistaken, this issue can be a problem in some versions of IE as well. The CSS technique I posted should be browser neutral, however.