Programming Forums > Web Development and Design > HTML / XHTML / CSS

wright45 · Jan 27th, 2005, 1:02 AM

I am really interested to hear anyones approach to keep a page that is layed out using CSS from looking funny or wrong if the user has there browser text-size (thats what its called in IE) to largest or something.

EdSalamander · Jan 28th, 2005, 10:48 AM

In any font-size styles use absolute values instead of relative ones. For example:

(Toggle Plain Text)

use an absolute value:
p {font-size:11px}

insead of a relative one:
p {font-size:small}

Relative sizes can be changed (or interpreted differently) by the browser. Absolute values, on the other hand, always stay the exact size you set them.

Ooble · Jan 28th, 2005, 5:54 PM

Quote:

Originally Posted by EdSalamander

In any font-size styles use absolute values instead of relative ones.

The W3C advise against this (and they're quite good with these things). If you load up a web site using absolute sizes instead of relative ones in Internet Explorer, you can't change the sizes at all through the Text Size menus.

EdSalamander · Jan 30th, 2005, 6:36 PM

True, absolute sizes aren't very friendly to the "visually-impared," (who are biggest reason the WC3 discourages absolute sizes) but if you you absolutly must have your text a certain size, they're what you use... *shrugs.* Personally, I try to use a mix of both, absolute sizes for menus and such that have rigid constraints, and absolute values for just about everthing else.

wright45 · Feb 10th, 2005, 7:37 PM

Some examples of what I'm getting at are here...
Go to these pages and look at them in browser text-size medium (default) and then largest (I use IE)

This is an example of a horrible page:
http://www.wamu.com
Notice how everything over laps when you change the browser text size to largest, thats terrible

http://www.asp.net is pretty bad too
When you use largest a horizontal scrollbar appears and you cant see the whole page without scrolling horizontally.

Here is an example of a good page:

http://www.htmldog.com
I hope to learn how to design any pages that I do like this...
When you use largest, everything resizes accordingly and it is still has a nice layout, no overlaping letters, no horizontal scroll.

I just thought I'd bring this topic up because..
1. I have a small screen laptop and I use the largest views possible so I can see better
2. It seems I always here old people complaining about "I cant read and see whats on the screen because its too small"
3. By the time our generation (<= 25) gets old (60+) there will be many more older people using computers (relative to now) and these kinds of things may be a bigger issue.

Berto · Feb 11th, 2005, 2:46 AM

you need th eoption to increase the font size otherwise people will just never visit your site.

EdSalamander · Feb 11th, 2005, 11:08 AM

From your examples, it looks like your problem is really more about boundry and layout changes than with font changes. My suggestion would be to let people change font sizes normally, but to setup your primary content containers in such a fashon that they can grow to accommodate changes in text size. Tables that are allowed to grow vertically but not horizontally are one option. But I would recomend make use of the css properties, like margin and position (among other) to keep your text contained and properly positioned.

Take a look through the HTML for htmldog.com and at the css they used. Go through and examine each tag and try to figure out what its doing and how it fits in with everthing else. Even look at the layout of the HTML itself and see how it compares to what you'd expect to see onscreen and what you actually do see onscreen. Come back with any new questions after you've given that a really good look...

the css for htmldog.com:
http://www.htmldog.com/css/boxer2.css

a good css reference site:
http://www.u.arizona.edu/~aef1/cssref/

Jan 27th, 2005, 1:02 AM	#1
wright45 Newbie Join Date: Jan 2005 Posts: 5 Rep Power: 0	CSS and Browser Text Size settings I am really interested to hear anyones approach to keep a page that is layed out using CSS from looking funny or wrong if the user has there browser text-size (thats what its called in IE) to largest or something.

Jan 28th, 2005, 10:48 AM	#2
EdSalamander Programmer Join Date: Dec 2004 Location: Tucson, AZ, USA Posts: 80 Rep Power: 4	In any font-size styles use absolute values instead of relative ones. For example: (Toggle Plain Text) use an absolute value: p {font-size:11px} insead of a relative one: p {font-size:small} use an absolute value: p {font-size:11px} insead of a relative one: p {font-size:small} Relative sizes can be changed (or interpreted differently) by the browser. Absolute values, on the other hand, always stay the exact size you set them. __________________ I can pick my friends. And I can pick my nose. So, why can't I pick my friend's nose?

Jan 30th, 2005, 6:36 PM	#4
EdSalamander Programmer Join Date: Dec 2004 Location: Tucson, AZ, USA Posts: 80 Rep Power: 4	True, absolute sizes aren't very friendly to the "visually-impared," (who are biggest reason the WC3 discourages absolute sizes) but if you you absolutly must have your text a certain size, they're what you use... shrugs. Personally, I try to use a mix of both, absolute sizes for menus and such that have rigid constraints, and absolute values for just about everthing else. __________________ I can pick my friends. And I can pick my nose. So, why can't I pick my friend's nose?

Feb 11th, 2005, 11:08 AM	#7
EdSalamander Programmer Join Date: Dec 2004 Location: Tucson, AZ, USA Posts: 80 Rep Power: 4	From your examples, it looks like your problem is really more about boundry and layout changes than with font changes. My suggestion would be to let people change font sizes normally, but to setup your primary content containers in such a fashon that they can grow to accommodate changes in text size. Tables that are allowed to grow vertically but not horizontally are one option. But I would recomend make use of the css properties, like margin and position (among other) to keep your text contained and properly positioned. Take a look through the HTML for htmldog.com and at the css they used. Go through and examine each tag and try to figure out what its doing and how it fits in with everthing else. Even look at the layout of the HTML itself and see how it compares to what you'd expect to see onscreen and what you actually do see onscreen. Come back with any new questions after you've given that a really good look... the css for htmldog.com: http://www.htmldog.com/css/boxer2.css a good css reference site: http://www.u.arizona.edu/~aef1/cssref/ __________________ I can pick my friends. And I can pick my nose. So, why can't I pick my friend's nose? Last edited by EdSalamander; Feb 11th, 2005 at 11:20 AM.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Feb 10th, 2005, 7:37 PM	#5
wright45 Newbie Join Date: Jan 2005 Posts: 5 Rep Power: 0	Some examples of what I'm getting at are here... Go to these pages and look at them in browser text-size medium (default) and then largest (I use IE) This is an example of a horrible page: http://www.wamu.com Notice how everything over laps when you change the browser text size to largest, thats terrible http://www.asp.net is pretty bad too When you use largest a horizontal scrollbar appears and you cant see the whole page without scrolling horizontally. Here is an example of a good page: http://www.htmldog.com I hope to learn how to design any pages that I do like this... When you use largest, everything resizes accordingly and it is still has a nice layout, no overlaping letters, no horizontal scroll. I just thought I'd bring this topic up because.. 1. I have a small screen laptop and I use the largest views possible so I can see better 2. It seems I always here old people complaining about "I cant read and see whats on the screen because its too small" 3. By the time our generation (<= 25) gets old (60+) there will be many more older people using computers (relative to now) and these kinds of things may be a bigger issue.

Feb 11th, 2005, 2:46 AM	#6
Berto Programming Guru Join Date: Aug 2004 Posts: 1,022 Rep Power: 6	you need th eoption to increase the font size otherwise people will just never visit your site.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Programming Forums > Web Development and Design > HTML / XHTML / CSS

CSS and Browser Text Size settings