CODEWITHSUNDEEP
htmlcssinternet-explorer-10
user2142786
user2142786

Reputation: 1482

Box-shadow is not working in i-e 10

Hi I am trying to use box-shadow for i-e 10 but it is not working correctly in for i-e 10 for other browsers it is working fine. here is my line

span {
   background:#000; 
   -webkit-box-shadow:0px 0px 2px 0px #333; 
   box-shadow:0px 0px 2px 0px #333; 
   color:#333333; 
   text-decoration:none;
}

Can anyone tell me what I have to add for this ??

Upvotes: 1

Views: 9026

Answers (5)

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17471

EDIT:

As @Spudley pointed, IE10 supports box-shadow just fine, but seems like is parsing bug in IE9/10. This hack pointed out by @ssilas777 should work:

@media screen and (min-width:0\0) {
    /* IE9 and IE10 rule sets go here */
    span {
        box-shadow:0px 0px 2px 0px #333;
    }
}

In case you need support for old IE you can use this hack:

HTML:

<div class="shadow1">
    <span>
    Box-shadowed element
    </span>
</div>

CSS:

.shadow1 {
    background-color: rgb(68,68,68); /* Needed for IEs */
    -moz-box-shadow: 0px 0px 20px 0px rgba(68,68,68,0.6);
    -webkit-box-shadow: 0px 0px 20px 0px rgba(68,68,68,0.6);
    box-shadow: 0px 0px 20px 0px rgba(68,68,68,0.6);

    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
    zoom: 1;
}
.shadow1 span {
    position: relative; /* This protects the inner element from being blurred */
    padding: 40px;
}

Fiddle:

http://jsfiddle.net/LxY5t/

More:

http://css-tricks.com/snippets/css/css-box-shadow/

Upvotes: 1

Spudley
Spudley

Reputation: 168715

The various answers here trying to suggest alternative syntax for you are all wrong.

IE10 supports box-shadow just fine. You shouldn't need to do anything special to get it working.

The only reason it might not be working is if the browser is rendering the page using Quirks mode or Compatibility mode. Either of these modes will disable the feature, because they're designed to emulate older versions of IE which did not have it.

To check if you're in one of these modes, press F12 to bring up the Dev tools window. In IE10, the mode information should be displayed at the top of the window. If it says anything other than "Browser Mode: IE10" and "Document Mode: Standards", then you've found the cause of the problem.

You can fix this as follows:

  1. Add a valid doctype to the top of your code, above the <html> tag as follows:

    <!DOCTYPE html>

  2. Add the X-UA-Compatible meta tag somewhere inside your HTML <head> element, as follows:

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

This should make sure IE10 loads the page in standards mode, which should in turn sort out the problems with the box-shadow.

Hope that helps.

Upvotes: 4

Krish R
Krish R

Reputation: 22721

Your css working fine, Since background color and box-shadow color are same so it is not visible.

Here changed the background color for testing,

span {
   background:#FFF; 
   -webkit-box-shadow:0px 0px 10px 0px #333; 
   box-shadow:0px 0px 10px 0px #333; 
   color:#333333; 
   text-decoration:none;
}

Upvotes: 0

ssilas777
ssilas777

Reputation: 9764

Try using @media blocks for IE specific css and increase the box - shadow size for IE 10.

span {
   background:#000; 
   -webkit-box-shadow:0px 0px 2px 0px #333; 
   box-shadow:0px 0px 2px 0px #333; 
   color:#333333; 
   text-decoration:none;
 }

/*For IE 10*/
@media screen and (min-width:0\0) {
span{
 box-shadow:0px 0px 5px 0px #333; 
}
}

Please note that we have increased the box -shadow size for IE 10.

Check this Moving IE specific CSS into @media blocks

Upvotes: 0

Bipin Kumar Pal
Bipin Kumar Pal

Reputation: 1017

span {
   background:#000; 
   -webkit-box-shadow:0px 0px 2px 0px #333; 
   box-shadow:0px 0px 2px 0px #333; 
   -ms-box-shadow:0px 0px 2px 0px #333;
   color:#333333; 
   text-decoration:none;
}

Upvotes: 0

Related Questions