Need help with a background image issue in IE8

HTML & CSS
1

Ok. So my website: http://legacyinvestmentsllc.com/

I have the main slider set up and each slide has a text block on top of the image and in EVERY browser EXCEPT IE8 it comes up as the transparent black color I need it to be but for some reason in IE it still shows up blue. Please let me know how I can make this work in IE8 as well.

Thanks.

2

IE8 and lower do not support RGBA values, hence why it doesn’t work. I’d add a fallback for legacy browsers:


background:rgb(0,0,0);
background: rgba(0,0,0,.9);

That way all browsers that don’t support RGBA will take the solid color and all others will render the RGBA value.

You could use vendor specific properties, though they’re heavy on resources and not worth the trouble, imo.

3

You could also use a semitransparent .png instead as the background (at least for IE8, if not for other browsers).

4

Here is the CSS I am using:

#featured article header {
padding: 15px 20px 10px;
height: 75px;
background:transparent;
background-image: url(http://legacyinvestmentsllc.deltaequitytemplate.com/files/2012/06/SliderCopyBG-333.png);
background-repeat: repeat;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

Works perfect in IE7 and 9 but in 8 the box shows up blue! Mind you this is a child theme situation in WordPress but I am using a repeating transparent PNG image and everything but for the life of me can’t figure out what’s up with the box showing up blue still in IE8! HELP.

5

Hi,

You are removing the image (among other things) with some specific ie8 style prefixes (.ie8 #featured article header{etc…}).

This should over-ride them:


#featured article header {
background: url(http://legacyinvestmentsllc.deltaequ...pyBG-333.png) repeat 0 0 !important;
}

However, you should look at why you have all the .ie8 rules in place in the first place.