Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other box-shadow issue

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #34520
    zemaker
    Participant

    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;
    }
    #88056
    SgtLegend
    Member

    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;
    }
    #88059

    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.

    #88075
    zemaker
    Participant

    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.

    #88094
    Johnnyb
    Member

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

    #88104
    zemaker
    Participant

    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.

    #88134

    @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.

    #88158
    zemaker
    Participant

    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)
  • The forum ‘Other’ is closed to new topics and replies.