Member Avatar for lyrico

Hello Guys.

Is there anyone here who can help me how to add shadow in div (browser is IE8). Thanks.
This Code doesn't work.

</style type='text/css'>
.main_div
{
  width:100;
  height:100;

  -webkit-box-shadow: #111 0 -2px 6px;  
  -moz-box-shadow: #111 0 -2px 6px;  
  box-shadow: #111 0 -2px 6px;

}
</style>
<div class='main_div'>
<p>Div with shadow
</div>
  • 3 Contributors
  • 2 Replies
  • 112 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by Dandello

Dani AI

Generated

Brief summary and practical fixes (for ):

IE8 does not implement the CSS3 box-shadow property, so the plain box-shadow rules you tried will be ignored there. Also your snippet had a malformed <style> tag and missing units on width/height (they must be 100px, not 100), which will break the stylesheet in all browsers.

A correct, modern rule (works in current browsers) looks like this:

.main_div {
  width: 100px;
  height: 100px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

For IE8 you have three reasonable fallbacks, choose one based on your constraints:

  • Use a small PNG shadow image (or a 9-slice) applied as a background or wrapper element. This is the most predictable and compatible approach.
  • Use a polyfill such as CSS3 PIE to emulate box-shadow in IE6–8. If you use PIE, remember: the behavior path is relative to the HTML (not the CSS file), the server must send the correct MIME type for .htc, and the element often needs position: relative and zoom: 1 to work.
/* include only in your normal CSS; PIE requires a .htc served correctly */
.main_div {
  behavior: url(/path/to/PIE.htc);
  position: relative;
  zoom: 1;
}
  • Use an IE-only stylesheet (via conditional comments) and provide an image-based shadow there:
<!--[if lte IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->

A note on filters: as mentioned, IE has proprietary DX filters for shadows, but they are limited, brittle, and can affect layout/performance. Prefer an image fallback or PIE unless you need a very specific legacy effect. For most projects, progressive enhancement (modern box-shadow everywhere else, a simple PNG for IE8) is the cleanest route.

Recommended Answers

All 2 Replies

Member Avatar for d1lu5ion 
Internet explorer doesn't support it.



<style type="text/css">
h1 {text-shadow:2px 2px #FF0000;}
</style>
</head>
<body>

<h1>Shadow effect</h1>

</body>
</html>
Member Avatar for Dandello

MSIE doesn't support text shadow and uses a filter to create box shadows. (

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')";
Edited by Dandello because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.