CODEWITHSUNDEEP
internet-explorer-9sasscss
Laura Hogarth
Laura Hogarth

Reputation: 21

Inset box-shadow not working in IE9

I'm trying to apply the following inset shadow to some buttons, using SASS:

    @mixin innerShadow {
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .45);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .45);
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .45); 
}

.button {
    display: inline-block;
    @include roundedCorners(5px);
    @include innerShadow;
    padding: 0.45em 1.5em 0.5em;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    &:active {
        position: relative;
        top: -1px;
    }
}

It works fine in Firefox, Safari, Opera and Chrome, but in IE9 the shadow simply doesn't show up at all. It doesn't work with an outer box shadow either, nor if I define the colour with a hex code instead of RGBA.

It's not an urgent problem as the buttons look fine without it, but I was wondering if anyone knew why this might be happening. I have checked that I have a valid doctype and there are no elements with border-collapse on the page.

Thanks.

Upvotes: 1

Views: 2558

Answers (1)

Pat
Pat

Reputation: 48

Its better to use compass for the CSS3 stuff, because you dont have to write the vendor-prefixes. You can try it here http://compass-style.org/examples/compass/css3/box_shadow/

I have tried your css with a "a" Tag in IE9 and for me it works.

So your box-shadow CSS works, the problem is probably in your html.

Upvotes: 1

Related Questions