Margin ( or padding not sure ) problem in Chrome/Safari

Question

Heres my link ( BE WARNED, its got autoplay audio - sorry...!)

link text

Its not the usual 'looks fine in FF but bad in IE' problem :)

It looks fine in IE6/7 Firefox, but in Chrome & Safari it has big problems with what looks like either margin/padding, or positioning. ( That narrows it down eh? )

If you have a look you'll see what I mean. It looks like I may have a conflict with one of my CSS rules, but then wouldn't that cause problems consistently across all browsers?

Any help and pointers is gratefully received. Thank you.

EDIT:Unsure as to why my reset.css rules are not taking effect...

Answer 1

The problem is the margin-top on the <h4> inside product-panel-content <div>s.

Modify the following style in site.css:

.product-panel-content h4 {
    font-size:140%;
    letter-spacing:-0.5px;
}

to be:

.product-panel-content h4 {
    font-size:140%;
    margin-top:0;
    letter-spacing:-0.5px;
}

Will fix the display issue in WebKit-based browsers (Safari and Chrome, for example). I am not sure if this will cause other display issues for your other browsers but experiment with using padding-top on the <h4> to supplement the lack of margin for spacing on that element if it does.