Text-shadow does not work on all browsers. How to fix it?

Discussion in 'CSS' started by ademmeda, Feb 2, 2010.

  1. #1
    Hi,

    I am working on a website and trying to create a text header with shadow. I used the following code:

    text-shadow: gray 0.06em 0.06em 0.1em;
    Code (markup):
    It looks just as I like in Google Chrome 3, however, it shows no shadow in IE 8 and a bigger shadow in Firefox 3.5.7. Is there any way to fix this and make it look like same in all browsers as in chrome?
     
    ademmeda, Feb 2, 2010 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    No.

    1) the specification does not actually say how text-shadow is actually to be rendered, so much like form elements, line-height and a dozen other things when the specification doesn't say, each browser maker goes their own direction to implement it however they want. This is actually in keeping with the point of HTML, that being that the user agent can 'best adjust' the content to however the UA or user thinks it should be shown.

    2) text-shadow is a CSS3 property, a specification not even out of draft and as such you have no business using it on a production website - unless of course you want to repeat what IE 5.x brought to the table and what we are still paying for today in terms of IE compatibility. It's fun to play with to see what we might be able to do SOMEDAY, but there's no legitimate reason to be using it on a normal website.
     
    deathshadow, Feb 2, 2010 IP
  3. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #3
    With that thought, no one would have used CSS2.1 until two years ago. CSS3 won't become final until there are two complete browser implementations which could be 10 years away.
    I'll have it deleted from our production sites immediately.

    You probably won't see text-shadow in IE in your life time. In modern browsers, you can use the vendor extensions to implement it now. That is, -moz-text-shadow and -o-text-shadow, which are nearly equivalent to the CSS3 current draft. (Look up those extensions cause I only guessed at them).

    The attributes may not be exactly the same in different browsers but they work just fine.
     
    drhowarddrfine, Feb 2, 2010 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Or, instead of cluttering up our CSS with vendor extensions for pretty effects, we can just leave what's currently in CSS3 and let the other browsers learn to deal with non-proprietary code.

    As a goofy extra, it's just "nice". Browsers who can deal with it, do, and those who can't, don't. So don't rely on it to show white text on a white background and you're fine, without adding a crapload of -moz this and -moz that.

    For that matter, Mozilla finally made it to text-shadow. I'll give them a golf-clap for that.
     
    Stomme poes, Feb 2, 2010 IP