Question

I am having styling issue with products loaded in datalist control in Chrome.
While everything looks ok in FF, Chrome gives me weird styling.
Here are the screenshots:

FF: http://gyazo.com/214fcfafbfb91e17ea1f084af84e61e4.png?1341955023

Chrome: http://gyazo.com/4459dc38dc01a18f62780392d8fb3625.png?1341955739

Here is the html markup:

<div class="product-grid">
        <asp:DataList ID="dlCatalog" runat="server" RepeatColumns="2" RepeatDirection="Horizontal"
            RepeatLayout="Table" ItemStyle-CssClass="item-box">
            <ItemTemplate>
                <nopCommerce:ProductBox1 ID="ctrlProductBox" Product='<%# Container.DataItem %>'
                    runat="server" />
            </ItemTemplate>
        </asp:DataList>
    </div>

Here is the CSS:

.product-grid { margin-bottom: 15px; width: 586px; text-align: center; margin-left: -10px; }
.product-grid .item-box { text-align: center; vertical-align: top; padding: 10px 11px 60px 11px; }
.product-grid .product-item { text-align: center; margin: 10px 5px 10px 5px; width: 250px; background: url('images/prod_grid_box_bg.gif') no-repeat 0 100%; }
.product-grid .product-item .product-title { font-weight: bold; font-size: 12px; background: url('images/deal_box_hl.gif') no-repeat 0 0; padding-left: 10px; }
.product-grid .product-item .product-title a { background: url('images/deal_box_hr.gif') no-repeat 100% 0; display: block; height: 2em; line-height: 1.3em; overflow: hidden hidden; padding: 4px 10px 8px 0px; }
.product-grid .product-item .picture { text-align: center; margin-top: 10px; }
.product-grid .product-item .description { margin: 5px 5px 0 5px; text-align: center; padding: 10px 5px 10px 5px; border-top: solid 1px #e3e3e3; color: #555; height: 50px; }
.product-grid .product-item .add-info { vertical-align: bottom; text-align: right; width: 250px; height: 85px; position: relative; }
.product-grid .product-item .add-info .prices { text-align: right; vertical-align: middle; position: absolute; bottom: 15px; right: 10px; }
.product-grid .product-item .add-info .buttons { vertical-align: middle; position: absolute; bottom: 15px; left: 10px; text-align: left; }
.product-grid .product-item .add-info .prices .productPrice { color: green; }
.product-grid .product-item .add-info .prices .oldproductPrice { color: Red; text-decoration: line-through; }

PRODUCT BOX CODE ADDED:

<%@ Control Language="C#" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.Modules.ProductBox1Control"
  CodeBehind="ProductBox1.ascx.cs" %>
<%@ Register TagPrefix="nopCommerce" TagName="ProductPrice2" Src="~/Modules/ProductPrice2.ascx" %>

<script type="text/javascript" language="javascript" src="../Scripts/jquery.expander.js"></script>
<script type="text/javascript">
    // you can override default options globally, so they apply to every .expander() call
    //$.expander.defaults.slicePoint = 50;

    $(document).ready(function () {
        // simple example, using all default options unless overridden globally
        //$('div.expandable h3').expander();

        // *** OR ***

        // override default options (also overrides global overrides)
        $('div.expandable h3').expander({
            slicePoint: 50,  // default is 100
            expandPrefix: '.....', // default is '... '
            expandText: '>>', // default is 'read more'
            collapseTimer: 5000, // re-collapses after 5 seconds; default is 0, so no re-collapsing
            userCollapseText: '<<'  // default is 'read less'
        });

    });
</script>
<%--<div class="product-item">
  <h2 class="product-title">
    <asp:HyperLink ID="hlProduct" runat="server" />
  </h2>
  <div class="picture">
    <asp:HyperLink ID="hlImageLink" runat="server" />
  </div>
  <div class="description">
    <asp:Literal runat="server" ID="lShortDescription"></asp:Literal>
  </div>
  <div class="add-info">
    <div class="prices">
      <nopCommerce:ProductPrice2 ID="ctrlProductPrice" runat="server" ProductId='<%#Eval("ProductId") %>' />
    </div>
    <div class="buttons">
      <asp:Button runat="server" ID="btnProductDetails" OnCommand="btnProductDetails_Click"
        Text="<% $NopResources:Products.ProductDetails %>" ValidationGroup="ProductDetails"
        CommandArgument='<%# Eval("ProductId") %>' CssClass="productgridproductdetailbutton" /><br />
      <asp:Button runat="server" ID="btnAddToCart" OnCommand="btnAddToCart_Click" Text="<% $NopResources:Products.AddToCart %>"
        ValidationGroup="ProductDetails" CommandArgument='<%# Eval("ProductId") %>' CssClass="productgridaddtocartbutton" />
    </div>
  </div>
</div>--%>
<div class="pblock">

    <div class="borderProd">
        <div class="expandable">
            <h3>
                <asp:HyperLink ID="hlProduct" runat="server" />
            </h3>
        </div>

        <asp:Literal runat="server" ID="lShortDescription" Visible="false"></asp:Literal>
    </div>

  <div class="img">
    <a id="hlImageLink" runat="server">
        <img id="hlImage" runat="server" style="max-width:170px;max-height:120px"/>
    </a>
  <div class="body">

  </div>
  <div class="body">
    <nopCommerce:ProductPrice2 ID="ctrlProductPrice" runat="server" ProductId='<%#Eval("ProductId") %>' />
  </div>
  <asp:Label ID="labUniversal" runat="server" ForeColor="Blue" Text=""></asp:Label>
</div>
</div>

Answer 1

I fixed the problem by setting the height of the item-box to 275px.
Thanks everyone for your help.