CODEWITHSUNDEEP
internet-explorer-7internet-explorer-6css
samir chauhan
samir chauhan

Reputation: 1525

CSS Box shadow not working in IE6 and IE7

I am working on a Drupal site. The client wants the site to be look exacltly the same in all browsers including the IE6. There is some problem with the box-shadow property in IE. I know that CSS3 property is not supported for IE. Is there any alternative solution for box-shadow for IE-6 so that it looks like a shadow in IE6 and IE7. I have tried for css PIE in which I used the htc file for IE to support the CSS3 property. But Its not working. The URL of The site is Godsak

The CSS code is 

.portal-top {
background-color: white;
box-shadow: 0 0 20px #000000;

-moz-box-shadow: 0 0 20px #000000; -webkit-box-shadow: 0 0 20px #000000; position:relative; margin: 15px auto 0; }

For IE I am using 

.portal-top {
background-color: white;
box-shadow: 0 0 20px #000000;
zoom:1;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=3);

}

the box-shadow is showing now in IE-7. But not that what I want. In IE-6 still no shadow is showing. Have a look at the url in firefox, I need it same for IE. Is it possible.

Thanks in advance.

Upvotes: 2

Views: 2030

Answers (3)

The Surrican
The Surrican

Reputation: 29874

the only solution i personally find practical for your problem is to make excessive use of images. no shadow effects, just images. you can just make screenshots from other browsers.

2nd alternative way would be to "downgrade" your site and only use elements that are supported by ie6.

of course there are a lot of hacks and some javascript workarounds but this is all seriously a huge mess and costs a hell of performance in most times.

if somebody still has ie6 there is probably a reason for that.

i would say that it is completely normal that sites look differently in different browsers. that is just the way it is. of course every site should work properly and render pretty. but that is almost guaranteed if you dont miss-use elements in a way they are not meant to be used.

and if someone uses ie6 there just is no shadow and thats it.

but as an answer to your problem that the client demands it, go for the images solution.

Upvotes: 3

Sparkup
Sparkup

Reputation: 3754

For PIE :

your need to include the behavior after every other css element :

#container{
    margin:0 auto;
    width:900px;
    ...
    behavior: url(css/ie/PIE.htc); /* url at http://www.indivar.info/godsak/ */
}

Last style sheet, last element. URL is relative path from page not style sheet

May I also add that @import is not recommended. You may want to try page speed.

Site looks great though. Hope it helps.

Upvotes: 0

DoubleMalt
DoubleMalt

Reputation: 1283

If you don't cater to China the best thing is to NOT make extra stuff to mitigate the IE6 antics.

If this is no option because the customer demands it, explain to the customer that you have to do a completely different site for IE6 (which is in the digit percentage in Europe last I looked), and that it will cost him nearly double the money if you do so. Not only now, but with each update of the site.

Actually there is no maintainable way to get these fancy CSS stuff work on IE6.

Upvotes: 2

Related Questions