Chrome & Safari css layout problem

[abcisme]

Shop is located at saffireblue.ca/shop

On the product info pages, the product name is misaligned and overlaps the product image. This only happens in Chrome and Safari from what I can tell.

Example: saffireblue.ca/shop/books-e-downloads/bath-bombs-by-elaine-stavert

Any help would be greatly appreciated!

[rstevenson]

As a general rule, whenever something displays well in some browsers and not in others, there'sa fault in the code -- either the php or the CSS. When I checked the syntax of your example page I found 54 errors and 3 warnings. Many of the errors are not critical but some may be. In particular there are DIVs trapped inside an HR, because the HR wasn't properly closed. On a complex page, those sorts of things can add up to a level of confusion for some browsers.

I also checked that product title (using Firebug in Firefox -- you must use this or something similar when developing a site!). I can see the DIV for the product name starts over at the left edge of the image, but on a 'good' browser something is pushing the product name over and leaving empty space in the DIV where the image is. Ordinarily this would be defined in your stylesheet, but Firebug didn't show any such definition, so I suspect this is just the image itself pushing the name over, and on some browsers it's not being pushed. So specify a left padding for the name, by adding this to the bottom of your main stylesheet...


#productName {
padding-left: 155px;
}

Adjust as needed.

Rob

[abcisme]

Hmm. That just bumps it out in all browsers. Any other ideas?

Thanks for taking the time to look at this for me, I really appreciate it!

[nigelt74]

Ok in your style sheet

find this

#productName {
color: #444444;
font-size: 2em;
font-weight: 400;
margin-top: -5px;
}


replace it with this

#productName {
color: #444444;
font-size: 2em;
font-weight: 400;
}

does that make a difference?

[nigelt74]

If that doesn't work

you could try this, its a css hack targeting webkit browsers only (Chrome Safari, Konqueror), it should work

@media screen and (-webkit-min-device-pixel-ratio:0) {
#productName {
margin-top: 0px;
}
}


add it to the very bottom of your stylesheet

[abcisme]

Yep. That did it! Thank you so much! :)