Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Chrome & Safari css layout problem

Chrome & Safari css layout problem

Views: 1,063

Results 1 to 6 of 6
3 Apr 2012, 3:58 PM
#1
abcisme avatar

abcisme

Zen Follower

Join Date:
Jun 2006
Posts:
298
Plugin Contributions:
0

Chrome & Safari css layout problem

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!

3 Apr 2012, 6:10 PM
#2
rstevenson avatar

rstevenson

Totally Zenned

Join Date:
Nov 2006
Location:
Dartmouth, NS Canada
Posts:
2,400
Plugin Contributions:
0

Re: Chrome & Safari css layout problem

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

3 Apr 2012, 8:38 PM
#3
abcisme avatar

abcisme

Zen Follower

Join Date:
Jun 2006
Posts:
298
Plugin Contributions:
0

Re: Chrome & Safari css layout problem

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!

4 Apr 2012, 5:28 AM
#4
nigelt74 avatar

nigelt74

Totally Zenned

Join Date:
Sep 2005
Location:
Waikato, New Zealand
Posts:
1,558
Plugin Contributions:
1

Re: Chrome & Safari css layout problem

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?

4 Apr 2012, 5:40 AM
#5
nigelt74 avatar

nigelt74

Totally Zenned

Join Date:
Sep 2005
Location:
Waikato, New Zealand
Posts:
1,558
Plugin Contributions:
1

Re: Chrome & Safari css layout problem

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

4 Apr 2012, 9:46 AM
#6
abcisme avatar

abcisme

Zen Follower

Join Date:
Jun 2006
Posts:
298
Plugin Contributions:
0

Re: Chrome & Safari css layout problem

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