CODEWITHSUNDEEP
htmlinternet-explorercssinternet-explorer-8
Jeff
Jeff

Reputation: 1800

inset box shadow IE8

I have a fiddle that displays an inset box shadow.

I'd like to achieve this type of affect in I.E. Is there a jquery box shadow I can apply, a work around to IE's troubles?

I've looked at htcPIE but it didn't behave nicely with my current application. Any other hints?

The code that works in modern browsers is:

 -moz-box-shadow: inset 3px 3px 4px #000;
 -webkit-box-shadow: inset 3px 3px 4px #000;
  box-shadow: inset 3px 3px 4px #000;

I was looking at in IE like :

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

but I'm missing the inset on the IE version.

Anyone have any luck with this?

Upvotes: 0

Views: 9082

Answers (2)

hardba11
hardba11

Reputation: 1516

There is a solution that works for IE without css3PIE . In IE 7/8 the element to which the shadow is applied, needs to have a background color set. Otherwise the shadow is inherited by child elements (including text).

here is how I achieve box shadow across all browsers...of course you'll need to customize for your own colors, strength, direction etc.

.shadow {
     -moz-box-shadow: 2px 2px 3px #A7A7A7;
     -webkit-box-shadow: 2px 2px 3px #A7A7A7;
     box-shadow: 2px 2px 3px #A7A7A7;
     -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7')";
     filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7');
}

.wrapper{
    margin: 10px;
    border: solid 1px #A7A7A7;
    background-color: white;//or whatever color you need; however transparent doesn't work
   }

Then just apply both classes

<div class="wrapper shadow">
     <div>
          <p>Some text that used to have a shadow, but doesn't anymore</p>
     </div>
</div>

Upvotes: 0

Christoph
Christoph

Reputation: 51201

The only useful hint is the following:

If it's not absolutely necessary, omit this effect for IE8. There is no equivalent MS-Filter for that and if css3PIE didn't work out for you, you are pretty much lost if you don't want to use images.

However a last solution would be to let the user install chrome-frame which I would consider not acceptable for such "gimmicks".

When developing your sites, never rely on those features like inner box-shadow if you don't want to lose IE community. Use it for decoration but don't do anything that would severly affect the Usability if not present.

Upvotes: 5

Related Questions