hi, i noticed when the dpi is set high than 96 to like 120 my site gets messed up using either firefox or ie7. the css basically breaks. anyone know a fix for this?
thanks
ps the site is
http://www.iaddesignandstudio.com
thnx
A:
There's not really a fix that can prevent anything happening if a user has adjusted their Windows DPI setting. Altering Windows to 'large fonts' mode, or setting it to a DPI setting other than the default, affects all layout in IE.
However, this should never cause a site to massively break. A few things shall be slightly misaligned, perhaps, due to rounding of values.
The site you've pointed to indeed does break quite massively when the font size is changed - for instance, change the default font in the browser (or set Firefox to "Zoom Text Only"). Text from the buttons completely leaves the buttons and starts hovering elsewhere.
It looks like the main cause of this, at least with the buttons across the top, is that the whole row of buttons is single background image and the text inside them are floated elements which match up with the background image only at a given font size - any adjustment to their size and position and they become out of whack with their background.
When designing, always change the zoom setting (in IE7 and Firefox) and the font size (eg in Firefox using "Zoom Text Only") and make sure that those things that do change in size, don't break the site. In some conditions, things specified in "pt" will scale while things specified in "px" won't.
How you could fix it
It's clear that you've designed everything to be a certain size in pixels, including the header and all the buttons/tabs. If you want to do this, declare the header DIV to be position: relative, and position the H1, H2, and UL inside it absolutely, using pixel values (relative to the containing div). Remove the margins, padding etc from the DIV to simplify. Specify widths, heights and top margins of the LI elements using pixels.
What I would do
Normally, I would build things like this to be flexible, so that if for some reason a person had really big fonts enabled on their browser, it would stretch nicely to handle it. That isn't really possible with your background images, because they are build especially for one given size only. So I'd have a repeatable background on the header, and I'd do each background for each button separately. Obviously, this is going to be more work.
thomasrutter
2009-02-28 11:56:04
+3
A:
The site uses a fixed-size layout, but mixes the units px and pt. When changing the dpi of your screen, the relative size of these units changes, ie the site is broken by design.
What you should do:
- don't use
ptfor screen layouts -ptis for printing only - read up on liquid layouts and the relative unit
em
Christoph
2009-02-28 11:56:46
if you want to create a fixed-size pixel-perfect layout, use `px` for everything; otherwise, only use `px` for things which depend on the size of bitmap graphics and `em` for things which depend on font-size; also note that fixed-size layouts are discouraged - web design is not print design!
Christoph
2009-02-28 12:09:13
Use px only where it may be strictly needed, for example for images. Although I have seen many sites recently which let images scale with the text as well. In the end of the day, px will be obsoleted completely (this will take some years to happen though).
ypnos
2009-02-28 12:10:10
This belonged in a comment rather than an answer, but not to worry. Using em instead of px isn't going to help you here at all. A large part of the problem is that the background images rely in exact pixel placements. If anything, you should use "px" for everything.
thomasrutter
2009-02-28 12:10:22
You aren't using ‘px’, you're using ‘pt’ — that's the problem. Set fonts that need to be sized the same as site images in ‘px’; use ‘em’ for text that should respect the user's preferred basic size. If you can, size all the important body text relatively for usability.
bobince
2009-02-28 12:40:53