- This topic is empty.
-
AuthorPosts
-
September 26, 2011 at 6:10 pm #34520zemakerParticipant
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 #88056SgtLegendMemberHave 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 #88059joshuanhibbertMemberI 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 #88075zemakerParticipantLooks 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 #88094JohnnybMemberHey 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 #88104zemakerParticipantThanks, 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 #88134joshuanhibbertMember@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 #88158zemakerParticipantYou 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.
-
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.