Click here to Skip to main content
15,867,756 members
Please Sign up or sign in to vote.
4.00/5 (2 votes)
See more:
XML
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; }


Every help is welcome.
Thanks in advance, Laziale


UPDATE: No one can help me?
Posted
Comments
Pablo Aliskevicius 11-Jul-12 10:37am    
In Chrome, you can right-click the suspicious image, and ask for 'analyze element' (or something like that). It shows you the markup and CSS for the current element.
Did you try it? Didn't it help?
pradiprenushe 12-Jul-12 2:36am    
Yes this right. Just right click in page & click inspect element. You can handle css, html here.
Arjun YK 14-Jul-12 2:43am    
or use fire bug and inspect element. you can get the fire bug in chrome Extensions free downloads

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900