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.