Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Text Shadow in Internet Explorer?

Tags:

css

internet-explorer

I'm coding a webpage and here is how it looks in Firefox, Safari, Opera, and Chrome.

removed dead ImageShack link

and here is how it looks in Internet Explorer (brace yourselves)

removed dead ImageShack link

Where is the Text-shadow for Internet Explorer? This is driving me crazy! As you can see, this page kinda relies on it to look good (Not to mention the header-image looks like crap on IE as well)

For example, I tried this (http://pastebin.ca/1994660) and it didn't work.

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

    <title>Jacob's CTF Highscores</title>
<!--[if IE]><style type="text/css">



</style>
<![endif]-->
<style>
body {
background: url("bg.png") #6d6d6d;
background-repeat:repeat-x;
filter: progid:DXImageTransform.Microsoft.DropShadow(
      offx=1, offy=1, color=#000000);
}
#title {
    background: url("title.png");
    width:450px;
    height:74px;
}
* {padding:0;margin:0;}
#mainwrap {
margin:0 auto;
width:800px;
}
.whole {
background: rgba(255, 255, 255, 0.5);
border:4px solid rgba(201, 201, 201, 0.5);
padding:5px;
margin-bottom:10px;
}
.scores {
width:77%;
padding:0;margin:0;
border:4px solid #5E5E5E;
background:#c2c2c2;
float:left;
}

.navigation {
width:20%;
padding:0;margin:0;
border:4px solid #5E5E5E;
float:left;
margin-right:5px;
}
.navigation ul {

list-style:none;
margin:0;
padding:0;
background:#c2c2c2;
}

.navigation ul li {
display:block;
margin:0;
padding:0;
font-family:tahoma;
}
.mainlead {
text-transform:uppercase;
font-family:tahoma;
text-align:center;
color:#78CF46;
font-weight:bold;
text-shadow:1px 1px 0 #000;
padding:5px;
background:#A3A3A3;
border-bottom:1px solid #5E5E5E;
}
#menutitle {
text-align:center;
color:#005D9C;
font-weight:bold;
text-shadow:1px 1px 0 #000;
padding:5px;
background:#A3A3A3;
border-bottom:1px solid #5E5E5E;
}
.navigation ul li a {
display:block;
padding:5px;
text-transform:uppercase;
color:yellow;
font-size:16px;
text-align:left;
font-weight:bold;
text-shadow:1px 1px 0 #000;
text-decoration:none;
}
.navigation ul li a:hover {
color:#fff;
background:#B0B0B0;
}
#boards {
border-collapse:collapse;
width:100%;
font-family:tahoma;
font-size:16px;
text-align:left;
font-weight:bold;
text-shadow:1px 1px 0 #000;
}
#boards td {
border-right:1px solid #5E5E5E;
text-align:center;
padding:5px;
}
#head {
border:0px;
color:#CC4949;
}
tr.thescores {
border-top:1px solid #5E5E5E;
color:#478FF5;
}
#first {
color:#C2C20E;
}
#second {
color:#9C9C9C;
}
#third {
color:#CD7F32;
}
</style>
</head>

<body>


<div id="mainwrap">
<div id="title"></div>
<div class="whole">
<div class="navigation">

    <div class="navwrap">

<ul>
<li id="menutitle"><div id="leaderboards">Leaderboards</div></li>
<li><a title="How many points you have." class="current" href="?view=overall">Overall</a></li>
<li><a title="How many captures you've made." href="?view=captures">Captures</a></li>
<li><a title="Total kills by adding tags, explodes, and mines." href="?view=kills">Kills</a></li>
<li><a title="How many tags you've made on your side." href="?view=tags">Tags</a></li>
<li><a title="How many people you've blown up with TNT." href="?view=explodes">Explodes</a></li> 
<li><a title="How many people you've killed with your mines." href="?view=mines">Mines</a></li>
</ul>


        </div>

</div>

<div class="scores">
<div class='mainlead'>Overall Leaderboards</div>

<table id="boards">
<tr id="head"><td>Rank</td><td>Username</td><td>Points</td><td style="width:80px;">Games</td> <td style="width:80px;">Avg. Won</td> </tr>
<tr id="first" class="thescores"><td>1</td><td style="text-align:left">Guard</td><td>423</td><td>12</td><td>1.4%</td> </tr>
<tr id="second" class="thescores"><td>2</td><td style="text-align:left">Jacob_</td><td>413</td><td>12</td><td>1.4%</td> </tr>
<tr id="third" class="thescores"><td>3</td><td style="text-align:left">NoobRUS</td><td>407</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>4</td><td style="text-align:left">Aanum</td><td>351</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>5</td><td style="text-align:left">Pandora</td><td>320</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>6</td><td style="text-align:left">Minec</td><td>300</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>7</td><td style="text-align:left">warptera</td><td>275</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>4</td><td style="text-align:left">Aanum</td><td>351</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>5</td><td style="text-align:left">Pandora</td><td>320</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>6</td><td style="text-align:left">Minec</td><td>300</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>7</td><td style="text-align:left">warptera</td><td>275</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>4</td><td style="text-align:left">Aanum</td><td>351</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>5</td><td style="text-align:left">Pandora</td><td>320</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>6</td><td style="text-align:left">Minec</td><td>300</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>7</td><td style="text-align:left">warptera</td><td>275</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>4</td><td style="text-align:left">Aanum</td><td>351</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>5</td><td style="text-align:left">Pandora</td><td>320</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>6</td><td style="text-align:left">Minec</td><td>300</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>7</td><td style="text-align:left">warptera</td><td>275</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>4</td><td style="text-align:left">Aanum</td><td>351</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>5</td><td style="text-align:left">Pandora</td><td>320</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>6</td><td style="text-align:left">Minec</td><td>300</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>7</td><td style="text-align:left">warptera</td><td>275</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>4</td><td style="text-align:left">Aanum</td><td>351</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>5</td><td style="text-align:left">Pandora</td><td>320</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>6</td><td style="text-align:left">Minec</td><td>300</td><td>12</td><td>1.4%</td> </tr>
<tr class="thescores"><td>7</td><td style="text-align:left">warptera</td><td>275</td><td>12</td><td>1.4%</td> </tr>

</table>
</div>


 <div style="clear:both;"></div></div> </div>


</body>
</html>
like image 489
test Avatar asked Nov 17 '10 14:11

test

People also ask

What is text shadow in computer?

Text shadow refers to adding layers to the text, i.e., giving the text a shadow whether to enhance, highlight, or increase the visual appeal of specific text by giving the text depth.

What is the use of text shadow?

The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations . Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.

What is a text drop shadow?

Use the Drop Shadow controls to create a shadow behind text, and to adjust the shadow color, opacity, offset from the text object, softness, and angle. All Drop Shadow parameters can be animated. Drop Shadow: An activation checkbox to enable or disable the drop shadow effect.

2 Answers

You could use a filter in your css like so:

filter:DropShadow(Color=#000000, OffX=1, OffY=1)

Usage:

{FILTER: DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)}
  • Color is the name or RGB value of the color for the shadow.
  • OffX and OffY are the number of pixels to offset the shadow from the object. Positive integers move the shadow to the right or down. Negative integers move the image to the left or up.
  • Positive can be set to 1 or 0. For normal objects, Positive=1 creates a normal drop shadow and Positive=0 creates a shadow within the non-transparent region with the shadow direction reversed. For transparent objects, the reverse is true.

Source

Demo

like image 147
Juan Cortés Avatar answered Nov 06 '22 20:11

Juan Cortés

Shadows made by filter:DropShadow aren't looking good.

I use another element with position:absolute when I need a good-loking shadow:

.sample {position:relative}

.sample p{position:relative;z-index:2;text-shadow:1px 1px 3px #000;}

.sample p.shadow{position:absolute;zoom:1;z-index:1;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#000000,offX=1,offY=1)
    progid:DXImageTransform.Microsoft.Alpha(opacity=25)
    progid:DXImageTransform.Microsoft.Blur(pixelradius=2.15, enabled='true');
    -ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=#000000,offX=1,offY=1)"
    "progid:DXImageTransform.Microsoft.Alpha(opacity=25)"
    "progid:DXImageTransform.Microsoft.Blur(pixelradius=2.15, enabled='true')";
    color: #111111;
    top:-2px;
    left:-2px;
}

*|html .sample p.shadow{display:none} /*hidden in other browsers*/

<div class="sample">
 <p>text</p>
 <p class="shadow">text</p>
</div>
like image 26
Feuerengel Avatar answered Nov 06 '22 19:11

Feuerengel
Sign in to Comment

Related questions

how to reset (clear) file input
Expected ')' JS error in IE after assigning a value to a function argument
internet explorer 8 ignores width for 'display: table-cell' element
Paste event listener on Internet Explorer getting wrong arguments
CSS min-width in IE6, 7, and 8
Can I render warning message if user's browser is not supported?
Get innerHTML of svg-tag result in undefined in IE
.click() giving access denied in IE11
keypress event not working in IE and Chrome but working in FF
Internet explorer displaying image links with colored border
wbr tag doesn't work in IE
Clearing file input box in Internet Explorer
What are the common mistakes to avoid when coding javascript for Internet Explorer?
form submit - IE access denied - same domain
Using IE dev toolbar on a pop up windowed web app
How Do I Fix A Flexbox Sticky Footer In IE11
ActiveXObject creation error " Automation server can't create object"
doPostback failing in IE 11+ Windows 8.1
AngularJS v1.2.5 script error with textarea and placeholder attribute using IE11
How to make an empty anchor tag clickable in IE7?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!