Why is this not displaying in IE?

[cssssc10]

#content #block8d {

width:927px;

height:526px;

padding:10px;

margin:0 auto;

border:1px solid #f60;

background-color:rgba(255,255,126,0.85);

border-radius:25px;

-moz-border-radius:25px; /* Firefox 3.6 and earlier */

box-shadow: 10px 10px 5px #888888;

filter:alpha(opacity=85); /* For IE8 and earlier */

}

This div shows up fine in every browser except for IE. How many times have we heard that before?

The border shows up but the rest does not. The background color doesn’t show up. The radius corners aren’t there. The drop shadow isn’t there.

At this stage, I’m willing to forego the transparency and drop shadow for IE users but I need the rest of it.

The site is due to launch today, please help!

[Mottie]

Do you mean IE9?

Older versions of IE do not support rgba, so you’ll need a fallback background color above the rgba definition.

The only other thing that comes to mind is that IE is more strict when it comes to case sensitivity, so if the div in question has an ID of “block8D”, IE won’t find it.

[cssssc10]

I stand corrected. version 9 is not having the problem it is older versions.
I see that Chris wrote about this (https://css-tricks.com/ie-background-rgb-bug/)
And I tried the fallback but that didn’t do the trick.

And now upon closer inspection I’m seeing that version 8 does not show transparent PNGs as being transparent so it all looks like rubbish anyway.

I’ve said this before, and I’ll say it again. People still using IE just deserve to see rubbish websites.

Thanks for your reply and any continued replies

[Author]

Posts