Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

background bug in IE8 when css box shadow is applied

background bug in IE8 when css box shadow is applied

Problem

I've created a DIV with Background image and have applied Box Shadow effect around it. However in IE8 the shadow is appearing on the content within the DIV instead of the DIV itself.

This bug only happens when there's a background on the DIV, if there was no background, the box is fine.

Heres my example build: http://jsfiddle.net/C9V2N/2/

Problem courtesy of: calebo

Solution

You have to split the properties it seems IE isn't interpreting the same way than Chrome or FF like this:

#test {
    background-image: url('http://placehold.it/100x100');
    background-repeat: no-repeat;
}

http://jsfiddle.net/C9V2N/21/

Hope it helps.

Aymeric.

Solution courtesy of: Aymeric

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

background bug in IE8 when css box shadow is applied

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×