Changing font size option

[cluelessphp]

I am wondering what is the best practice to change the font size of a certain area of a page such as http://www.brighamandwomens.org/mdSearch/default.aspx

I know there are probably many ways to achieve this but, what is the BEST way to achieve something like this. Code or tutorial link would be greatly appreciated. Thanks in advance.

[D.D.S. Polymath]

These might be worthy starting points:

http://alistapart.com/stories/alternate/

http://alistapart.com/articles/relafont

http://alistapart.com/articles/bodyswitchers

http://alistapart.com/articles/phpswitch

http://www.sitepoint.com/article/css-simple-style-switcher

http://www.dynamicdrive.com/dynamici...etswitcher.htm

All you need to do is follow the instructions and declare different font-size values where you would have them.

Good luck.

[cluelessphp]

What about using Javascript? Aren't there ways to do it without switching the whole CSS file? Especially since I am only looking to resize one id area?

[Kravvitz]

You can use multiple stylesheets. Some with the majority of the styles and others that control the differences for different font-sizes.

[cluelessphp]

I am aware of that as DDS pointed out but, I am sure there are other ways of achieving this. Especially since the example I provided does not switch stylesheets.

[Kravvitz]

True, there's more than one way to do it.

Tommy would argue that since modern browsers have this functionality built-in websites shouldn't provide this functionality too.

By the way, the one in your example doesn't seem to work in Firefox or Opera.

[D.D.S. Polymath]

By the way, the one in your example doesn't seem to work in Firefox or Opera.

Exactly what I had noticed myself. The newly launched Safari for Windows and Netscape (obviously) are no exceptions. The only browser to make any difference in my experience was Internet Explorer 7.

What I noticed in other browsers was only a slight resizing in height of the containing element, without font size being affected.

I still think http://alistapart.com/articles/relafont is the closest to your intended goal. Perhaps you should take another look at the instruction and the final example.

If you would rather refrain from switching styles with a modicum of JavaScript for fear of your visitors having disabled scripting in their favourite browser(s), then why not simply declare different font-size values for separate areas in your html document by way of your stylesheet?

It cannot be too difficult for you to style it approximately like this (please supply meaningful names for your elements and your own preferred typefaces and appropriate font-size/line-height values):

 body {font-size: 62.5%}
 
html>body {font-size: 10px}
 
#bodycopy, #navigation {font: 1.2em/1.5 Verdana, "Trebuchet MS", sans-serif}
 
#sidebar {font-size: 1em}
 
.fine_print {font-size: 0.9em}

(etc.)

This is only a suggestion; there are many ways to resolve the issue to your satisfaction. I am sure you will succeed.

[cluelessphp]

Looks like the code on that page was bad but it does work on the other pages
http://www.brighamandwomens.org/multimedia/#

Tommy would argue that since modern browsers have this functionality built-in websites shouldn't provide this functionality too.
Opera.

I could not agree more! But this is not my choice :-(

[AutisticCuckoo]

Tommy would argue that since modern browsers have this functionality built-in websites shouldn't provide this functionality too.

I would argue that a web author/designer/developer shouldn't have to provide this functionality on his/her site. If anyone wants to spend their time and energy on implementing something that's already built into every browser, it's up to them.

I don't say 'shouldn't provide', I say 'shouldn't have to provide'.

There's quite a difference, and I just wanted to set the record straight.

[D.D.S. Polymath]

Exact and to the point as ever, Mr Olsson. You really do deserve the title conferred on you.

[cluelessphp]

Again...I wish it was my choice but, it is not.

[james_littler]

take a look at this

http://www.ats-heritage.co.uk/div/Re...Div/index.html

this works in all browsers (that i know of )

its a simple javascript effecting a defined array of variables...its very simple to impliment, if you like the results let me know and i'll post the javascript for you or alternatively i can make you a download link from the site you have (hopefully) just viewed

[james_littler]

and just to stick up for the decission to impliment your own textsizer......

my nan uses the internet to do a few bits of shopping and find out whats on telly (she is pre sky plus era)

on normal navigation she is fine but if she forgot to wear her glasses she would be lost....and it would be pointless directing her via the menus to enlarge the font as she would NEVER find it.....

but

with a pretty obvious font sizer in front of your face she'd be fine....and is fine as i asked her to test my site.... got to be both cross browser compatable and cross generation compatable in this day and age

so this functionality is not rendered obsilite by the implimentation of font sizers into browsers...it just allows those who are not to tech savy as to know that ctrl++ enlarges the font, to view pages correctly (and without migrane)

: )