SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Non-Member
    Join Date
    Feb 2006
    Posts
    294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing font size option

    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.

  2. #2
    SitePoint Zealot D.D.S. Polymath's Avatar
    Join Date
    Apr 2005
    Location
    Regnvm ServiŠ
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Be not too sure that none of the old magic endures...

  3. #3
    Non-Member
    Join Date
    Feb 2006
    Posts
    294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use multiple stylesheets. Some with the majority of the styles and others that control the differences for different font-sizes.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    Non-Member
    Join Date
    Feb 2006
    Posts
    294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Zealot D.D.S. Polymath's Avatar
    Join Date
    Apr 2005
    Location
    Regnvm ServiŠ
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    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):

    Code CSS:
     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.
    Be not too sure that none of the old magic endures...

  8. #8
    Non-Member
    Join Date
    Feb 2006
    Posts
    294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like the code on that page was bad but it does work on the other pages
    http://www.brighamandwomens.org/multimedia/#

    Quote Originally Posted by Kravvitz View Post
    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 :-(

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    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.
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Zealot D.D.S. Polymath's Avatar
    Join Date
    Apr 2005
    Location
    Regnvm ServiŠ
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Exact and to the point as ever, Mr Olsson. You really do deserve the title conferred on you.
    Be not too sure that none of the old magic endures...

  11. #11
    Non-Member
    Join Date
    Feb 2006
    Posts
    294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Again...I wish it was my choice but, it is not.

  12. #12
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  13. #13
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)

    : )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •