Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member
    Join Date
    Oct 2010
    Posts
    5
    Member #
    24486
    The CSS code for text-shadow works in everything but Internet Explorer. Any ideas on what I can do about this? I need for it to show up in I.E., too.
    Thank you.

  2.  

  3. #2
    Junior Member
    Join Date
    Oct 2010
    Posts
    26
    Member #
    24200
    Liked
    1 times
    For now, there ain't a solution. You probably will have to use some Javascript to do this for you.
    Something like this:
    http://krijnhoetmer.nl/stuff/javascript/text-shadow/

    But there is a website where they develop a tool with wich you can enable CSS3 features in IE6, IE7 and IE8. It is called CSS3PIE.
    About PIE – CSS3 PIE: CSS3 decorations for IE

    Currently they don't support text-shadow. This project is still in development so i'm sure it will be included sometime.

  4. #3
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    1.create the same text in <P> or <img>
    2.stack it behind the original and bump
    {
    top: 7px; left: 7px; or margin: 7px 0px 0px 7px; filter:alpha(opacity=60); opacity:0.6; z-index: 0; }
    this assumes the z-index of what is being shadowed has an index of 1;


    for a generic shadow just use the same method
    <div class='shadow'></div>
    and give it
    .shadow {
    top: 7px; left: 7px; or margin: 7px 0px 0px 7px; width: 100%; height: 100%; background: #000000; filter:alpha(opacity=60); opacity:0.6; z-index: 0; }
    this assumes the z-index of what is being shadowed has an index of 1;

    also works for glass panels just drop the bg for the original div
    and use the shadow div without the top: left: bump and drop the opacity to about 40 & 0.4

    exact positioning methods depend on application!!


    <!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>
    <style>
    * { margin: 0px; padding: 0px; }
    .frame { position: relative; width: 300px; height: 500px; margin: 50px auto 50px auto; }
    p { position: relative; z-index: 1; }
    p.shadow { position: absolute; top: 2px; left: 2px; filter:alpha(opacity=40); opacity:0.4; z-index: 0; }
    </style>
    <body>
    <div class='frame'>
    <div class='panel'></div>
    <p>Text</p>
    <p class='shadow'>Text</p>
    </div>
    </body>
    </html>
    <!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>
    <style>
    p { color: #ffffff; padding: 5px; }
    .frame { position: relative; width: 300px; height: 500px; margin: 50px auto 50px auto; }
    .panel { position: absolute; width: 100%; height: 100%; background: #000000; filter:alpha(opacity=70); opacity:0.7; z-index: 1; }
    .shadow { position: absolute; top: 7px; left: 7px; width: 100%; height: 100%; background: #000000; filter:alpha(opacity=40); opacity:0.4; z-index: 0; }
    .content { position: relative; z-index: 2; }
    </style>
    <body>
    <div class='frame'>
    <div class='panel'></div>
    <div class='shadow'></div>
    <div class='content'>
    <p>Text</p>
    </div>
    </div>
    </body>
    </html>

    while($get_it !== true){ continue; }

  5. #4
    Junior Member
    Join Date
    Oct 2010
    Posts
    5
    Member #
    24486
    Thanks to everyone for helping me with this very vexing problem. I rally appreciate it!

  6. #5
    Junior Member
    Join Date
    Feb 2011
    Posts
    3
    Member #
    26705
    I.E. show text-shadow with CSS

    This topic was closed, so I made this one to respond

    How to make I.E. show text-shadow in CSS?

    I played around a bit with Dorky's code, and found this worked better for me:
    HTML 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>
    
    <!--[if IE ]>
    <style type="text/css">
    h1 {display:inline; width:100%; position:relative; z-index:1; font: bold 24px/38px "Trebuchet MS", sans serif; color:red;}
    .shadow {display:inline; width:100%; position:absolute; z-index:0; font: bold 24px/34px "Trebuchet MS", sans serif; color:#999; top:0; left:1px; filter:alpha(opacity=30); opacity:0.3; }
    </style>
    <![endif]-->
    
    </head>
    <body>
    
    <h1>Don’t Waste Your Time on the “Latest &amp; Greatest”<span class="shadow">Don’t Waste Your Time on the “Latest &amp; Greatest”</span></h1>
    <p>Some dummy text Some dummy text Some dummy text Some dummy text Some dummy text Some dummy text</p>
    </body>
    </html>
    And in your regular styles, make sure to put:
    span.shadow {display:none;}

    Adjusting the line height of the span moves the shadow vertically.

  7. #6
    WDF Staff Wired's Avatar
    Join Date
    Apr 2003
    Posts
    7,657
    Member #
    1234
    Liked
    139 times
    Quote Originally Posted by Geezer D View Post
    This topic was closed, so I made this one to respond
    Wasn't closed, you just have to check the box saying you're aware you're bumping a thread that hasn't been responded to in 3 months. Merged threads.
    The Rules
    Was another WDF member's post helpful? Click the like button below the post.

    Admin at houseofhelp.com

  8. #7
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    The problem with your code, Geezer, is that it's based on absolute font sizes. Some people might call it evil. I'm not one of those people, but some might.

    The non-JS way I've done it is similar to Dorky's, but since I've been turned on to Cufon, I use their text shadowing when I need it and then Dorky's solution comes in as a backup. I have only done this once, however, for a members-only kind of site.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  9. #8
    Junior Member
    Join Date
    Feb 2011
    Posts
    3
    Member #
    26705
    Ah, OK. Cufon. That's the ticket. MUCH easier, thanks.

    I have used Font Squirrel | Create Your Own @font-face Kits but it has no text shadow option.

    That code works with em's, too, btw:

    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>
    <style type="text/css">
    * {margin: 0px; padding: 0px;}
    body {padding:100px 300px 0; font-size:62.5%;}
    h1 {display:inline; width:100%; position:relative; z-index:1; font: bold 2.4em/2.8em "Trebuchet MS", sans serif; color:red;
                 text-shadow: 2px 1px 1px #999;}
    .shadow {display:none;}
    </style>
    <!--[if IE]>
    <style type="text/css">
    .shadow {display:inline; width:100%; position:absolute; z-index:0; font: bold 1em/1em "Trebuchet MS", sans serif; color:#999;
                  top:3px; left:2px; filter:alpha(opacity=30); opacity:0.3;}
    </style>
    <![endif]-->
    </head>
    <body>
    
    <h1><span class="shadow">Don’t Waste Your Time on the “Latest &amp; Greatest”</span>Don’t Waste Your Time on the “Latest &amp; Greatest”</h1>
    
    </body>
    </html>


Remove Ads

Posting Permissions

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

Search tags for this page

css3pie text shadow
,

how to make text shadow none in internet explorer

,
ie 8 how to make text shadow
,
pie text-shadow
,
text-shadow pie for ie
Click on a term to search for related topics.
All times are GMT -6. The time now is 02:59 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com