CODEWITHSUNDEEP
cssinternet-explorer
Mich
Mich

Reputation: 151

css border shadows errors in IE

Hi I am trying to add a border to button in cshtml

.linkbig:hover {
    border: solid #000000 1px;
    -webkit-box-shadow: 6px 6px 5px #000000 ;
    width: inherit;
}

but all I am getting is a border when I want a shadow this is only failing in IE

any help?

Upvotes: 0

Views: 57

Answers (5)

AlanMorton2.0
AlanMorton2.0

Reputation: 1053

box shadow in IE need no prefixing 

box-shadow: 1em 0.1em 0.5em 0.05em #000000;

or older IE you need -ms

ms-box-shadow: 1em 0.1em 0.5em 0.05em #000000;

firefox will need -Moz

-moz-box-shadow: 1em 0.1em 0.5em 0.05em #000000;

if you do not need the border line you need to remove this:

border: solid #000000 1px;

or you'll end up with a 1px black line around your .linkbig and this is likely to hide your shadow if its really subtle.

-Website is only supported by Safari, Chrome, Opera.

Upvotes: 0

Anju Aravind
Anju Aravind

Reputation: 3362

try this 

  filter:
  progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=10, Color='#000000')

Upvotes: 0

G.L.P
G.L.P

Reputation: 7217

Try like this:

CSS:

.linkbig:hover {
 -webkit-box-shadow: 6px 6px 5px #000000;
 -moz-box-shadow: 6px 6px 5px #000000;
 -o-box-shadow: 6px 6px 5px #000000;
 box-shadow: 6px 6px 5px #000000;
}

Upvotes: 0

imbondbaby
imbondbaby

Reputation: 6411

-webkit- is only supported by Safari, Chrome, Opera 15+.

Therefore, your code will not work in IE or Firefox.

You could however try using:

-moz-box-shadow: 6px 6px 5px #000000;  /* Firefox */
-ms-box-shadow: 6px 6px 5px #000000;  /* Internet Explorer */
box-shadow: 6px 6px 5px #000000; /* CSS3 */

However, this is only supported by IE 9 or later.

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

Update your CSS like below. So that it will work in chrome, firefox and IE.

.linkbig:hover {
border: solid #000000 1px;
-webkit-box-shadow: 6px 6px 5px #000000 ;
box-shadow: 6px 6px 5px #000000 ;
-moz-box-shadow: 6px 6px 5px #000000;
width: inherit;
}

Upvotes: 0

Related Questions