SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Thailand
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to get drop shadow text to display cross browser?

    I have been wrestling with getting drop shadow text to display the same in both IE and Mozilla (Firefox). What I am using seems to be a popular and rather standard method. It works great in IE but Firefox mangles it because its positioning is very different. Here is the basic code;

    h1 {font-size: 50px; text-align: center;}
    .container {position: relative; left: 1px; top: 1px; color: #c0c0c0;}
    .text {position: absolute; left: -1px; top: -1px; color: #990000;}

    and then;

    <div align="center">
    <h1 class="container">TEXT GOES HERE<span class="text">TEXT GOES HERE</span></h1>
    </div>

    Firefox seems to be positioning the text inside the h1 container differently. The h1 container spans all the way across the page, and Firefox positions the .container text centered on the page, but the .text text is positioned (properly?) all the way over on the left side of the h1 container. But IE basically centers both on the page, just positioned slightly different for the shadow effect. What I cant figure out is why the two browsers are positioning this different. As usual I suspect Firefox is doing it correctly, but IE is displaying it the way I want it. And according to others this does seem to be a standard way of doing text drop shadows. Anyway the question is, how to do this so positioning is displayed the same across browsers?

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I wouldn't use the method you're going with. Even using an image with a proper alt attribute would be more accessible than what you've got going on now. Basically if someone were to try and view your site in a screenreader or text-only browser they'll think you messed something up because text is repeated twice for each heading.

    However, if you want to continue down this path (and I really suggest that you do not), this will probably work better than what you have now:
    Code:
    h1 {font-size: 50px; text-align: center;}
    .container {position: relative; left: 1px; top: 1px; color: #c0c0c0;}
    .text {display: block; position: relative; bottom: 1em; left: -1px;}
    and then;
    HTML Code:
    <h1 class="container">TEXT GOES HERE<span class="text">TEXT GOES HERE</span></h1>

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I know Vinnie has answered this already but I thought I might explain why your original wasn't working

    and Firefox positions the .container text centered on the page, but the .text text is positioned (properly?) all the way over on the left side of the h1 container.
    This is because absolutely placed elements default to content width and not auto width (which is effectively 100%) therefore there is no space to centre the absolute text within.

    You would need to provide a width for mozilla but would need to be hidden from ie. Your code could be simplified as follows.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    h1 {font-size: 50px; text-align: center;color: #c0c0c0;position:relative;}
    .text {position: absolute; left: -2px; top: -2px; color: #990000;}
    html>body .text{width:100%}
    </style>
    </head>
    <body>
    <h1>TEXT GOES HERE<span class="text">TEXT GOES HERE</span></h1>
    </body>
    </html>
    Of course Vinnie's suggestion would also work and his comments about accessibility should be taken into account

    Paul

  4. #4
    SitePoint Member Suzy's Avatar
    Join Date
    Oct 2004
    Location
    Scotland
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    my 2 cents

    Another way yet.. if you prefer no hacks..

    I too agree with Vinnie on his "do not use if concerned about accessibility" view, but if you do want to use it I would change his code slightly (sorry ) The relative positioning may cause further problems with any/all content that follows the header, because although you've moved the span text it's relative position will still cause any following text to go back to where it should be! Using negative margins on the span instead would free up the space.. in order to use negative margins you need to know the height of the h1, and as you'd set the the font-size to 50px I just guessed at a line height of 60px, you would adjust that to suit..

    CSS:
    Code:
    h1 {
      font: 50px/60px verdana, arial, sans-serif; 
      text-align: center; 
      color: #c0c0c0; 
      background: #efefef; 
      margin: 0;
    }
    .text {
      display: block; /* to place span text on the following line the same width as the previous line */
      color: #900; 
      margin-top: -62px; /* then move it back up = line-height+shadow depth */
      margin-left: -2px; /* move left shadow depth */
    }
    
    p {
    background: #fcc; 
    margin: 0;
    }

    HTML Code:
    <h1>TEXT GOES HERE <span class="text">TEXT GOES HERE</span></h1>
    <p>following text</p>
    h1 and p margins removed and background colors added for clarity

    Suzy
    Last edited by Suzy; Oct 23, 2004 at 15:19. Reason: getting used to the BB codes ;)

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Good catch Suzy!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Suzy,

    Thats a good solution

    I still think my solution is simpler and better lol

    The only problem with your solution is when the text wraps to the next line (if you haven't restricted the height) and the shadow doesn't so you end up with two line of text. I realise this could be fixed but would involve even more code.

    I know my version needs a "hack" even though the child selector isn't really a hack (but obviously any selector that is used because one browser interprets it differently could be classed as a hack. However that would exclude most of css lol - e.g. position:relative for example - perhaps the biggest hack there is for ie).

    Anyway, this is the interesting thing about css in that people can come up with a variety of ways of achieving the same result. Theres 3 different ways in this thread so far

    Paul

  7. #7
    SitePoint Member Suzy's Avatar
    Join Date
    Oct 2004
    Location
    Scotland
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    yup, 3 ways

    Quote Originally Posted by Paul O'B
    I still think my solution is simpler and better lol ....

    ....position: relative; perhaps the biggest hack there is for ie....

    Paul
    You're entitled to like your way best
    I believe in choices, and that's the freedom/creativity that CSS gives, there isn't just one way to do things

    IMO The biggest hack for IE has got be that we have to workaround their proprietary "haslayout" property (usually with a dimension)

    position: absolute is one of the properties that forces IE to give an element "layout" so in your method (which does indeed work better for multi line text situations) is why you don't need a width for IE, it is "presuming" a width for you.. and this width is not even 100%!

    As usual IE is not following the recommended way to size an absolute box, which is to use all four co-ordinates. IE doesn't support this method of calculation, but it's using its own haslayout rules instead, not that it's important in this case as its default width is fine...

    Your code could even be further amended to:
    Code:
    h1 { font-size: 50px; 
    text-align: center; 
    color: #c0c0c0; 
    position:relative;
    }
    .text {
    position: absolute; 
    top: -2px;
    left: -2px; 
    right: 0;
    bottom: 0; 
    color: #900;
    }
    which would provide yet another way of coding..

    Suzy

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Good explanation Suzy - I like your thinking

  9. #9
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    My answer would still be - Use an image. Breaking your head over these kind of effects is un-neccesary in my opinion, because html (and css) isn't made for fancy effects.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by egor
    My answer would still be - Use an image
    Spoilsport

    (and css) isn't made for fancy effects.
    Hmmm - thats what i thought it was used for - presentation.

    If you have safari 1.1 then you can use the text-shadow property as thats the only browser (I think) that recognises it at present.

    http://www.w3.org/TR/REC-CSS2/text.h...t-shadow-props
    http://dbaron.org/css/test/shadow

    So yet another way (even if only 2 people can see it lol).

    Paul


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
  •