Stylesheet problem - Resizing text

[Richie Bisset]

HI All,

hopefully someone can help me. The W3C accesibility guidelines state
that visually impaired users should be able to resize text within a
page. My client at the moment wants a site that complies with these
guidelines, but i also have to use a stylesheet. At first i used
embedded stylesheets, but when i put the pages up to our server the text
wasn't scaleable. As a result i switched to linked stylesheets, and it
worked fine on our server.

The problem is that the client has now put the site up to their server
and they can no longer resize the text.

Can anyone suggest a way round this for me?

at present i am using this to link in the stylesheet:
<link type="text/css" rel="stylesheet" href="/css/styles.css" />

and this is all i am defining within the stylesheet:
..bodytext { font-family: verdana, arial, helveica; font-size: 11px;
font-weight: normal}
h3 { font-family: Verdana, Arial, Helvetica; font-size: 12px;
font-style: normal; font-weight: bolder; font-variant: normal}
..titlebar { font-family: Verdana, Arial, Helvetica; font-size: 11px;
font-style: normal; line-height: normal; font-weight: bolder; color:
#666666}
..h3 { font-family: Verdana, Arial, Helvetica; font-size: 11px;
font-weight: bolder}

thanks in advance for any help.

Regards,

Richie

 

[Steve Pugh]

hopefully someone can help me. The W3C accesibility guidelines state
that visually impaired users should be able to resize text within a
page. My client at the moment wants a site that complies with these
guidelines, but i also have to use a stylesheet. At first i used
embedded stylesheets, but when i put the pages up to our server the text
wasn't scaleable. As a result i switched to linked stylesheets, and it
worked fine on our server.

The problem is that the client has now put the site up to their server
and they can no longer resize the text.

How the styelsheet is linked to should make no difference. Were you
always using the same browser to test with? Was the stylesheet being
applied at all every time?

Can anyone suggest a way round this for me?

Some browsers do not allow the user to resize text sized in certain
units. (At least not without wading through preferences in order to
turn off _all_ font sizing or _all_ stylesheets.)

Windows IE will not resize text specified in px or pt
Netscape 4.x will not resize text specified in pt

So don't use pt or px for text sizing in your stylesheet.

Steve

 

[Richie Bisset]

Hi Steve,

thanks for that. can you give me any suggestions as to what to use to specify
text size rather than pt or px? i know you can use semantic text ie. large,
small etc. but what level of control do you have with that?

it is bizzarre as i can look at it in ie 6.02 on our server and the text
scales fine. exactly the same code and style sheet in the same browser on
their server and the text wont change size at all.

thanks again for your help.

richie

 

[jake]

HI All,

hopefully someone can help me. The W3C accesibility guidelines state
that visually impaired users should be able to resize text within a
page. My client at the moment wants a site that complies with these
guidelines, but i also have to use a stylesheet. At first i used
embedded stylesheets, but when i put the pages up to our server the text
wasn't scaleable. As a result i switched to linked stylesheets, and it
worked fine on our server.

The problem is that the client has now put the site up to their server
and they can no longer resize the text.

Can anyone suggest a way round this for me?

at present i am using this to link in the stylesheet:
<link type="text/css" rel="stylesheet" href="/css/styles.css" />

and this is all i am defining within the stylesheet:
.bodytext { font-family: verdana, arial, helveica; font-size: 11px;
font-weight: normal}
h3 { font-family: Verdana, Arial, Helvetica; font-size: 12px;
font-style: normal; font-weight: bolder; font-variant: normal}
.titlebar { font-family: Verdana, Arial, Helvetica; font-size: 11px;
font-style: normal; line-height: normal; font-weight: bolder; color:
#666666}
.h3 { font-family: Verdana, Arial, Helvetica; font-size: 11px;
font-weight: bolder}

thanks in advance for any help.

Regards,

Richie

Redefine your text sizes as '%' (percent).

regards.

 

[Richie Bisset]

brilliant, thanks for that.

Richie

Redefine your text sizes as '%' (percent).

regards.

 

[Steve Pugh]

Please don't top post.

thanks for that. can you give me any suggestions as to what to use to specify
text size rather than pt or px? i know you can use semantic text ie. large,
small etc. but what level of control do you have with that?

Very little. In CSS 1 the steps were scaled at 1.5 (so medium was 1.5
times larger than small which was 1.5 times larger than x-small and so
on) but in CSS 2 this was changed to 1.2. I think all current browsers
use 1.2 or thereabouts. There's also the flaw whereby IE 4 - 5.5 (and
6 in quirks mode) treats small as equivalent to the browser's default
whereas other browsers treat medium as the browser's default.

If accessibility is a goal then I'd recommend the following:

Don't set anything at all for the main content. Then it will appear at
the size the user has chosen, or at the their browser's default if
they have chosen not to choose a size.

Size text that should be larger or smaller than the main content
(headings, legalese, etc.) with percentages.

h1 {font-size: 160%;}
..copyright {font-size: 90%;}

Note that these are percentages of the parent element's font size. So
if you nest two elements with class="copyright" inside each other the
inner one will have text that is only 81%.

You can use em instead of percentages (1em = 100%)
h1 {font-size: 1.6em;}
..copyright {font-size: .9em;}

There are a few bugs with em in IE. Conversely there are bugs with %
in NN4 and Opera 5/6. I prefer % as an em bug is still present in the
latest IE whilst the latest NN and Opera have lost their % bugs.

it is bizzarre as i can look at it in ie 6.02 on our server and the text
scales fine. exactly the same code and style sheet in the same browser on
their server and the text wont change size at all.

Hmm, my IE6.2800.1106 won't resize text specified in pt or px, ever,
as far as I've ever noticed.
The stylesheet is definitely being applied? And it hasn't been changed
at all? Can you post URLs so we can confirm?

Steve

 

[Richie Bisset]

Cheers Steve,

The percentage thing has sorted it out.

I'd post the URL, but at present it's still in our secure site, and i can't really
post the password on an ng. As far as I can see though the stylesheet is applied
on our server.

if it's any help my version of ie is
6.0.2800.1106.xpsp2.030422-1633

and apologies for the top posting (it's not a term i've coem across before, but i
assume you mean leaving the message you're replying to in at the bottom of the
reply?) won't happen again.

Thanks again,

Richie

 

[Beauregard T. Shagnasty]

Quoth the raven named Richie Bisset:

Cheers Steve,

The percentage thing has sorted it out.

Good. body { font-size: 100%; ... }

I don't believe anyone mentioned your choice of Verdana as the main font.

..bodytext { font-family: verdana, arial, helveica; font-size: 11px;
font-weight: normal}

http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

helveica is spelled incorrectly, and font-weight: normal is the
default, so is unnecessary. Should also end with sans-serif in case a
visitor has none of your declared fonts.

You don't need ".bodytext" - just set for the body element. You also
don't need to keep repeating font-family declarations for every
element. The Cascade (of Cascading Style Sheets) will handle it.

and apologies for the top posting (it's not a term i've coem across
before, but i assume you mean leaving the message you're replying
to in at the bottom of the reply?) won't happen again.

Correct. You should post your reply below (or within, as I have done
here) a well-trimmed quote.

Thanks again,

Surely.

 

[Richie Bisset]

Cheers,

that's been really helpful

I don't believe anyone mentioned your choice of Verdana as the main font.

nope, i'd never seen any of that before. I'l certainly be bearing that in
mind in future

helveica is spelled incorrectly, and font-weight: normal is the
default, so is unnecessary. Should also end with sans-serif in case a
visitor has none of your declared fonts.

doh! my html skills are well rusty. i used to do sites fairly regularly, but
all my work seems to be in director these days. A big thank you to all who've
bailed me out on this one.

Regards,

Richie