Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    9
    Rep Power
    0

    CSS - Making text same on all monitors??


    I was looking to make my text on my site www.myhps.com the text as it is but want it to stay the same no matter what size you change the settings/font size to. Any help would be GREAT

    THank you

    Jeff
  2. #2
  3. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1099
    You can make text an exact size like so:
    Code:
    body
      {
      font-size: 10pt;
      /* or */
      font-size: 12px;
      }
    IMO, when it comes to the web, you should use something a little less exact:
    Code:
    body
      {
      font-size: small;
      }
    But no matter what you do, most browsers allow the user to change the font size based on a percentage of the original/set font size. There's nothing you can do about it.

    http://www.w3.org/TR/CSS21/fonts.html
    # Jeremy

    Explain your problem instead of asking how to do what you decided was the solution.
  4. #3
  5. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,007
    Rep Power
    2791
    If you want the font to be exactly the same, or as near as possible, define it with pixels (font-size:10px

    Point or Named values (font-size:10pt/small) are what most people like to use, but browsers tend to vary the sizes.
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    there is no way to make the font in a fixed size,
    other than to use images, which isn't a very good solution,

    a better solution is to use em or %,
    if you also use em,ex or % on all elements size,
    margins etc. you can make you page scaleable and the page will look alike regardless of the users font-setting,
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    9
    Rep Power
    0
    thanks for the replys.... the thing is I have seen sites where no matter what you do with the settings if you change the size to small large largest medium... the text does not move???
  10. #6
  11. :(){ :|:&};:
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    Germany
    Posts
    297
    Rep Power
    11
    I tested it with Internet Explorer 6:
    If you use CSS and define the size of your text by pixel or pt the sze is fixed.
    But when I used Firebird the font-size changes no matter what - but as you should optimize your webpage for the usual text size and resolution your customers will use - I guess CSS should be alright - because the user should know what he is doing when increasing the text-size
    regards >_<

    ws. fgeller.de
    em. felix@fgeller.de
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Miami, FL
    Posts
    47
    Rep Power
    11
    9800, found a problem on your site. While it's not major, cosmetics are important on the world wide web. your FAQ button is not sized correctly with its rollover. Also, check the file sizes of your images. They take a while to load and I'm on a T1 here at work. Are you preloading them?
    David C. Pulgar
    www.zenithlight.net

    PETER: Good morning Mr. Sun
    SUN: Good Morning Peter
    PETER: Isn't it a beautiful day Mr. Sun?
    SUN: It's always a beautiful day with two scoops of raisins Peter!
  14. #8
  15. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    9
    Rep Power
    0
    Thanks for the advice I did notice that error on the FAQ. I was wondering what tyou mean by the pics cause I have looked on sever computers and loaded fine... so dont know.

    I was looking to see how you get the CSS on the page so I can have it all load in the same size no matter what they tell it to load as ha. Any help would be GREAT

    Thank you all.

    Jeff
    wolfpack333@hotmail.com
  16. #9
  17. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Miami, FL
    Posts
    47
    Rep Power
    11
    Nevermind, it seems my connection at work is not all that. I checked it here at home and it worked fine. Here's another threat about CSS. At the bottom there's a post I made with some examples of CSS and how you link pages to them.

    Help with CSS
    David C. Pulgar
    www.zenithlight.net

    PETER: Good morning Mr. Sun
    SUN: Good Morning Peter
    PETER: Isn't it a beautiful day Mr. Sun?
    SUN: It's always a beautiful day with two scoops of raisins Peter!
  18. #10
  19. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    Dallas, Texas
    Posts
    19
    Rep Power
    0
    Akh said that using images for text is not a good solution. I must humbly disagree.

    We are web designers and as much as it is our responsibility to make fast loading, accessible sites, it is also our responsibility to create a rich, visually appealing experience for the user. Sometimes (not all the time) you just have to have that nice, smooth, anti-aliased, properly kerned and leaded piece of type.

    This is where CSS can put the 'cherry' on top of the 'sundae'.


    There is a method for creating headers and titles and other text elements with images while still providing text (HTML text) to blind users, users with images disabled, and users with old (non CSS compliant) browsers. It is called Fahrner Image Replacement, or the "FIR" method.

    Fahrner Image Replacement works like this. In your html code you have:

    <h1 id="firHeader"><span>Headline Text</span></h1>

    In your CSS you have:

    #firHeader {
    width: 300px;
    height: 50px;
    background: #fff url(path/images/firHeader.gif) top left no-repeat;
    }
    #firHeader span {
    display: none;
    }

    This way most people see your crisp image based text as your headline (it is the background image of your h1 container), and the minority will still see a well formated bit of headline text.

    CSS to the rescue.



    Homework
    -----------------
    Dave Shea says much more about it in his article "In Defense of Fahrner Image Replacement" http://www.digital-web.com/features/..._2003-08.shtml
  20. #11
  21. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    i was talking about replacing all text with images. which isn't a good solution,

    using a image in headers etc. is not wrong,

    but the solution you came up with is not a good solution,
    if i turn off all images in my browser i get no infomation, just a blank space.

    if you are going to use image why not use the image tag and the alt attribut?

    <h1><img scr="header.gif" alt="The header text" /></h1>
  22. #12
  23. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    Dallas, Texas
    Posts
    19
    Rep Power
    0
    You are right. This is because you have images off and CSS on. Thats a very rare combination though. There is still no way to get around that. Thanks for pointing that out.

    However, if someone is browsing with images off then they're not concerned with how your site looks anyway. You could add the title attribute to the h1 tag and I think screen readers will still pick it up. Are there any disabled users out there that can verify this?


    if you are going to use image why not use the image tag and the alt attribut?

    <h1><img scr="header.gif" alt="The header text" /></h1>
    Nothing wrong with that at all. But a big advantage of the FIR method is that you can completely separate your content from your presentation. ALL of your "look and feel" can be controlled with your style sheet. Re-designing an entire site would be as easy as swapping style sheets.
    Last edited by retromonkey; August 22nd, 2003 at 04:28 PM.
  24. #13
  25. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    9
    Rep Power
    0
    Hi thanks for posting for my topic I was looking to make my site im working on have the text not change size just as on this site: www.themayhem.com on the left side it does not change as you chage size from large to small.. stays same. I was looking to see if there was any way you could help??

    It would be much appreciated.

    Thanks a lot..

    Jeff
  26. #14
  27. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1099
    Maybe you should explain what you mean by "... chage size from large to small". If I go to the link you provided I can change the size of the normal text (and by normal I mean text that is not an image) via Mozilla.
    # Jeremy

    Explain your problem instead of asking how to do what you decided was the solution.
  28. #15
  29. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    9
    Rep Power
    0
    if in internet explorer you go to View > Text size. Then you can change from large medium small. I want to make my site so the zize i set it at is the size it is at ALL monitors so it is the SAME on all screens. so it sisables that feature
    Is that any better???
    THanks
    Jeff
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo