CSS problem displaying box-shadow in IE8

HTML & CSS
1

Hi :slight_smile:

Need your urgent reply.
Im using CSS to display rounded rectangle using box-shadow option.

clear: both;
margin-top:0px;
width: 170px;
background: #fff;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);	
position: absolute;
z-index: 90; /* the stack order: displayed under ribbon rectangle (100)

Above CSS code works good in Firefox, Chrome. But not in IE.
What i have to do to make the above code to work in IE too(IE8)?

I dont know how to rectify it. Please help me out of this problem.

Thanks in Advance

Regards,
Vanash

2

Upgrade to IE9 or provide alternatives as those properties aren’t supported in IE8 and under I’m afraid.

Look here for supported css3 properties.

Or css3 PIE.

Or use normal css2.1 with css and images as we have been doing for years.:slight_smile:

3

Thanks Paul…

So you said, there is no other way to get the same view in IE8 (as viewed in Firefox).

Some of my site viewers are using the IE8 or less. I cant suggest them to use IE9. As of your suggestion, Image might be the good idea.

If you know anything apart from that, please let me know

Regards,
Vanash

4

Think of it this way. The IE8 web browser is too thick to know how to do it the CSS3 way.

You’ll either need to fake it on IE8 by using something like CSS3 PIE as already suggested, or use a different web browser.