Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Page Layout Changes with Monitor Settings

Page Layout Changes with Monitor Settings

Locked

Views: 1,284

Results 1 to 7 of 7
This thread is locked. New replies are disabled.
20 Mar 2009, 4:32 AM
#1
craig_robbo avatar

craig_robbo

Zen Follower

Join Date:
Oct 2008
Posts:
109
Plugin Contributions:
0

Page Layout Changes with Monitor Settings

Hi

My site is running at a fixed page width of 906px with the sideboxes set at 150px. Which is fine on most PC's.

However when my laptop's monitor settings are set to 120 DPI instead of the standard 96 DPI my sideboxes appear to change size (they are set to 150px in admin) and my whole page goes askew.

My laptop is running Vista and IE7. I cannot get the problem to replicate in Firefox which makes it hard to find the answer.

My site can be found at http://www.imagocollections.com.au/index.php?main_page=index&cPath=33

Any Help would be really appreciated as I wont be able to go live until I get it fixed.

Thanks

Craig

20 Mar 2009, 4:07 PM
#2
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Page Layout Changes with Monitor Settings

What happens if you change the sidebox width spec from px to em? On a default ZC installation, 1em = 10px for the base. Your ratio may vary, but that would be a reasonable start.

px is a monitor-specific dimension, while em is relative only to the displayed font size. If someone makes fonts bigger in their browser, em sizes will increase the same.

22 Mar 2009, 3:30 AM
#4
craig_robbo avatar

craig_robbo

Zen Follower

Join Date:
Oct 2008
Posts:
109
Plugin Contributions:
0

Re: Page Layout Changes with Monitor Settings

Hi

Many thanks to both of you again.

I tried setting the sideboxes in admin (also tried it in the stylesheet) to em without success. I also tried setting the main page width to various em settings as well.

It does seem to be that the font size is increasing disproportionally to the rest of the page (the word 'day dresses' takes up 2 lines at 120 DPI but only 1 line at 96 DPI).

It wouldn't be something like setting the font size to a fixed value in the stylesheet instead of a % would it?

22 Mar 2009, 3:47 AM
#5
craig_robbo avatar

craig_robbo

Zen Follower

Join Date:
Oct 2008
Posts:
109
Plugin Contributions:
0

Re: Page Layout Changes with Monitor Settings

Tried setting all the body font size to a small % - this got rid of the line break but didn't fix the page width problem so there may be 2 issues here?

The page width seems to change dependant on whats in the centre column i.e. with the main womens image there will be a white space added to the right side of the page whereas on the product page there will be a white space to the right where the centre column seems to have shrunk.

I dont want to cloud the issue any further but i'm also missing a right border on my left sidebox in Firefox - not sure if it's related.

Thanks

Craig

22 Mar 2009, 3:54 AM
#6
tony_sar avatar

tony_sar

Totally Zenned

Join Date:
Jul 2006
Location:
Montreal, Canada
Posts:
2,276
Plugin Contributions:
0

Re: Page Layout Changes with Monitor Settings

you may want to look at this blog

http://www.williamkolean.com/williamblog/?p=18

22 Mar 2009, 5:24 AM
#7
craig_robbo avatar

craig_robbo

Zen Follower

Join Date:
Oct 2008
Posts:
109
Plugin Contributions:
0

Re: Page Layout Changes with Monitor Settings

Thanks for that.

Tried putting ": expression(screen.deviceXDPI > 96 ? 1000 / ((screen.deviceXDPI / 96) * 16) + “%” : “62.5%”);" into my body font size as the blog suggested but this just made the font at 120 DPI even bigger. The page layout problem didn't change so I'm not sure if its related??

Thanks again though.

Craig