Grow your CSS skills. Land your dream job.

box-shadow issue

  • # September 26, 2011 at 6:10 pm

    Really like the way css-tricks uses box-shadow for the content div, however when I try to implement it the way it is on this site, in IE8 I get a transparent background instead of the white (as box-shadow is not supported by IE7-8)…any ideas on a nice way to have it get a white background when using IE?

    #main-content > .inside {
    background: none repeat scroll 0 0 padding-box white;
    border: 8px solid transparent;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    position: relative;
    }
    # September 27, 2011 at 1:52 am

    Have you tried just using the background-color property as what you have above is far to much syntax for a simple background color.

    #main-content > .inside {
    background-color: #fff;
    border: 8px solid transparent;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    position: relative;
    }
    # September 27, 2011 at 2:54 am

    I think you are actually looking for something like this: http://jsfiddle.net/sl1dr/Vue8H

    A transparent border will let the background color through, so it won’t do what you are after.

    # September 27, 2011 at 9:33 am

    Looks like that one doesn’t degrade nicely for IE…I wonder how they did it here then. I am assuming he must have two different CSS files…one for CSS3 compliant browsers and one for non compliant ones.

    # September 27, 2011 at 12:25 pm

    Hey zemaker, you could always use CSS3 Pie. It makes CSS3 properties such as box-shadow work in IE. Super simple to use too.

    # September 27, 2011 at 1:49 pm

    Thanks, but I trying to stay away from anything other than pure CSS, this is for a Lifaray project and I don’t want to bother with having to get 3rd party stuff working w/ Liferay.

    # September 28, 2011 at 1:26 am

    @zemaker I’m not sure what you mean, it degrades very gracefully in IE, just as the box-shadow used on this site does; it disappears. I assume that you meant to write it doesn’t work in IE? If you want IE to work (less than 9) then you need a non-CSS solution.

    # September 28, 2011 at 3:10 pm

    You are actually correct it does degrade well for IE, I spoke too soon. Only issue is that the effect is not as nice, as what is used on this site.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".