SitePoint Sponsor

User Tag List

Results 1 to 21 of 21

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Nov 2000
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS and font tags?

    Amazon seems to use both CSS and font tags. How does that work? I currently use font tags and I'd like to switch to CSS, but I'm concerned about accessibility from browsers that don't support CSS or have poor support. Where can I read about dealing with that issue? Why not just use font tags and avoid the whole mess?
    But what care I for praise? - Bob Dylan

  2. #2
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are going to use CSS you shouldn't bother with font tags. The only reason these days to use font tags is to garauntee that Netscape 4 won't misbehave and forget to apply your styles (as it frequently does) - but NS4 is becoming increasingly less relevant and unless your site's audience has a large number of NS4 users it is not worth mesing up your code with font tags just to keep the fonts consistent in their browser. My personal view is that as long as my sites are readable in NS4 (doesn't have missing text, menus overlapping content and so forth) I really don't care if it is using the wrong font.

  3. #3
    Weird Little Girl Desdelena's Avatar
    Join Date
    May 2002
    Location
    Canada
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I wouldnt use the <font> tag for anything myself. Ive never liked it much... and its now deprecated. I use CSS to define fonts and their sizes. All of my page(s) content is always contained within a <div> or <td> tag so I just set things accordingly.

    Code:
    td,div {font-family: Verdana,Arial,Helvetica,Geneva,sans-serif;
    font-size: 12px;}
    BTW I dont consider NN4.x worth any consideration... its out of date.

  4. #4
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Desdelena
    BTW I dont consider NN4.x worth any consideration... its out of date.
    I wish I could say the same but my audience uses it more than I want.

    My classroom is the only one in the district that stills has nn4 (we do have ie installed as secondary tho)
    Wavelan

  5. #5
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Ah, yes I agree there are better Mozilla builds now, that in general are superior to Micro$oft. But unfortunately for me I have to place some consideration to the Netscape 4.xx users because a great percentage appear on the server logs for me to totally disregard them.

    };-) http://www.xhtmlcoder.com/

  6. #6
    SitePoint Evangelist
    Join Date
    Nov 2000
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wavelan and xhtmlcoder-

    What do you guys do about the CSS issue? Do you use both font tags and CSS? How does that work anyway?
    But what care I for praise? - Bob Dylan

  7. #7
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thing is is that p, h1, etc. are all block-level elements. If you have 2 different <p> tags there will be a gap between them. This doesn't happen with the <font> tag which is why many people still mix CSS and the Font tag. In reality, you could substitute the <span style="{style definition}"> for <font> since span is an inline element just like font is.

    HTH.
    Sketch
    Aaron Brazell
    Technosailor



  8. #8
    SitePoint Evangelist
    Join Date
    Nov 2000
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sketch-

    I haven't delved into CSS yet so I know zero about it. What would what you have proposed accomplish?
    But what care I for praise? - Bob Dylan

  9. #9
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's an example.
    Code:
    <h3>Header</h3>
    <p>Here's your paragraph text</p>
    Would look something like this:

    Header

    Here's your paragraph text


    Alternatively, this:
    Code:
    <p><span style="font-size: 14px; font-weight:bold;">Header</span><br />
    Here's your paragraph text</p>
    Would look like this:

    Header
    Here's your paragraph text


    The difference is is that the first deal with 2 different block-level elements - h3 and p, where the second one only deals with one - p and uses an inline element - span - instead.

    Hope this helps.

    Sketch
    Last edited by Sketch; May 15, 2002 at 11:15.
    Aaron Brazell
    Technosailor



  10. #10
    SitePoint Evangelist
    Join Date
    Nov 2000
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But isn't "span style" a CSS tag that won't be displayed properly by the likes of Netscape 4? I thought font tags were used in conjunction with CSS to ensure proper display across browsers. I can't say I understand how that would work together though. Would CSS just "cancel" out font tags unless it isn't supported in which case the font tags define the text's attributes?
    But what care I for praise? - Bob Dylan

  11. #11
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought <span> was NN4.7 compliant. I guess I could be wrong though. Anybody know for sure?

    Sketch
    Aaron Brazell
    Technosailor



  12. #12
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Desdelena
    Well I wouldnt use the <font> tag for anything myself. Ive never liked it much... and its now deprecated. I use CSS to define fonts and their sizes. All of my page(s) content is always contained within a <div> or <td> tag so I just set things accordingly.

    Code:
    td,div {font-family: Verdana,Arial,Helvetica,Geneva,sans-serif;
    font-size: 12px;}
    BTW I dont consider NN4.x worth any consideration... its out of date.
    Just because something is deprecated does not mean that it doesn't work OR that it's not valid markup. Keep in mind that only the newer browsers will interpret CSS correctly. There's still a sizeable portion (close to 10%) of the population using version 4 and older browsers according to the counter.

    CSS is a great thing and I'm excited about the prospects of using it. However, depending on the intended userbase, you cannot rely completely on CSS. Amazon.com is a perfect example. If they alienate even 1% of their users, they';re throwing away MILLIONS in potential sales. You make the decision based on your needs.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  13. #13
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SPAN is valid markup from the HTML 4 spec. Netscape might ignore some of the style declarations used along WITH the SPAN tag but it knows that the SPAN tag is valid.

    Sketch...

    I personally don't like the extra space after H tags to I simply style the return out like so:

    h3, h4 { margin: 0px; }

    Of course Netscape ignores this though.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  14. #14
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by GrantShady
    But isn't "span style" a CSS tag that won't be displayed properly by the likes of Netscape 4? I thought font tags were used in conjunction with CSS to ensure proper display across browsers. I can't say I understand how that would work together though. Would CSS just "cancel" out font tags unless it isn't supported in which case the font tags define the text's attributes?
    Grant...the reason why they call them Cascading Style Sheets is that they have an order of precedence. That order goes like so:

    1. Inline styles
    2. Embedded styles
    3. Linked styles
    4. Imported styles
    5. Default browser styles

    This means that you can set a style to affect an entire page of text, but change the style for one word on that page simply by changing the style for that word. Basically, the "closer" the style is to the object you're styling the more important the style becomes. The most important style (in relation to that object) is the one that wins out if styles are conflicting. [link]

    Here's a GREAT tutorial on stylesheets. It's old, but this is how I learned CSS.
    http://hotwired.lycos.com/webmonkey/...tutorial1.html
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  15. #15
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Sketch
    Alternatively, this:
    Code:
    <p><span style="font-size: 14px; font-weight:bold;">Header</span><br />
    Here's your paragraph text</p>
    Would look like this:

    Header
    Here's your paragraph text
    This is true, but you should never actually write your CSS like this. It is important to keep using "meaningful" HTML tags whenever possible in order to preserve the contextual information they provide. See these articles for a better explanation:

    http://brainstormsandraves.com/2002_...shtml#76539537
    http://www.mcu.org.uk/articles/cssaccessproblems.html

  16. #16
    SitePoint Evangelist
    Join Date
    Nov 2000
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Creole-

    Thanks for the info, and I will definitely read that tutorial. You say that you can not completely rely on CSS. What is the best solution for a site that is concerned about the 10% you mention? I'm trying to take advantage of the benefits of CSS while still properly supporting users with older browsers. Is there a solution or anything close to it?
    But what care I for praise? - Bob Dylan

  17. #17
    SitePoint Evangelist
    Join Date
    Nov 2000
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suppose what I need to know how to do is "degrade gracefully" in the case of flaky or non-existant CSS support.
    But what care I for praise? - Bob Dylan

  18. #18
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The best way of degrading gracefully in older browsers is to "hide" any CSS that old browsers may not understand. The easiest way of doing this is with the CSS @import() command:
    Code:
    <style>
    <!-- 
    /* Lots of NS4 and older browser friendly
       CSS properties here */
    
    @import("better-browsers.css");
    // -->
    </style>
    Browsers that support modern CSS standards (IE5+, Mozilla, NS6+ and Opera) will undertstand the import command and will over-ride the styles you have already specified with the advanced CSS contained in better-browsers.css. Crummy browsers (like NS4) will use the simple rules you define in the <style> tag.

    Careful use of this technique along side well structured xhtml markup will allow you to create a document which is readable with no style sheet applied (thanks to the xhtml tags you have used like <h1>), looks slightly prettier in outdated browsers such as NS4 thanks to the simple styles defined in the <style> tag, and that looks funky in modern browsers that can utilise the advanced CSS.

  19. #19
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dam, creole.. on a roll there...
    it's always good to hear your words of wisdom.

    I personally don't care for NN 4.x .. one thing that MS does with IE is continually suggest an upgrade .. and when you upgrade to the latest browser you can't go back really because MS doesn't offer the older browsers for download.

    A buddy of mine who works at the University, just got a new dell something like a 1.5 ghz .. anyways you can guess what the default browser is .. NN 4.79 ... it just makes me sick..

    Netscape screwed up .. by continuing to offer their old browers.. it has created a lull in advancement of web design and other related technologies who continually have to design sites that will support technology that is 5 years old.

    I personally ignore NN 4.x .. and disable style sheets for that broswer .. but for some people, I know that is not an option, and I feel sorry for you.



    Chuck
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com

  20. #20
    SitePoint Guru
    Join Date
    Jul 2000
    Location
    Long Island, NY
    Posts
    755
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just converted my favorite site to CSS from font tags and I'm using it for some table attributes, too. I was resistant, and I still haven't got the hang of doing it right with relative sizes, so I used px, even though I really don't like that. It's not valid yet. I left the margin attributes in the body tags in as a work-around for Netscape 4.7x browsers, as well as specifying them in the stylesheet, because I do have quite a few visitors with those. But with or without the stylesheet, it's readable. The change shaved off at least 3MB from the site, and the whole site is only about 70 MB and I bet at least 60 of that is sound files and photos, so the percentage is pretty amazing.

  21. #21
    Weird Little Girl Desdelena's Avatar
    Join Date
    May 2002
    Location
    Canada
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im not saying they wont work. I just try to aviod using old tags if I can. I dont want to be stuck behind if you know what I mean. I also look at it like this, if people keep designing for old browsers then people wont bother update them because they dont need to. I dont do high traffic sites like Amazon.com and you have a completely valid point. But my oppinion still stands. I use Browser News to check real browser stats.

    For the problem with block elements you can just add some CSS and get rid of the extra-space or whatever you want to call it. For example below for the <h1> tag as I think someone else also pointed out. I believe that NN6.x supports that... but Im not sure I dont recall every checking myself.

    Code:
    h1 {margin: 0px;}
    Someone also recently showed me that you can do this as well.
    Code:
    h1 {display: inline;}


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
  •