Managing background colors and opacity in IE6, IE7 and more advanced browsers

So you want to make a background color that has a certain opacity, but then, after being astounded that people still use Internet Explorer 6 and 7, you discover that IE6 and IE7 can’t handle opacity. Thus, you must have a nice fallback — some color that kicks in for IE6 and IE7.

Oh, and you’re doing this in a way that uses the cascade — your adding a background color with an additional class further down your stylesheet, because you want to customize the same div different ways when it appears throughout your page.

Something that looks like this in your HTML:

<div class="original tweakedVersion1">Hello, I'm tweaked version 1</div>
<div class="original tweakedVersion2">Hello, I'm tweaked version 2</div>

Using background and background together is what you need. This is the CSS you want:

.original {
font-size: 20px;
width: 100px;
height: 200px;
}

.tweakedVersion1 {
background: rgb(168, 79, 119); /*IE6, IE7 pick up this */
background: rgba(168, 79, 119, .75); /* more advanced browsers grab this */
}

.tweakedVersion2 {
background: rgb(55, 55, 55); /*IE6, IE7 pick up this */
background: rgba(55, 55, 55, .75); /* more advanced browsers grab this. IE6 & 7 are like, 'Whaaaaaaat?' */
}

These do NOT work:

.tweakedFail1 {
background-color: rgb(168, 79, 119); /*IE6 and 7? Nope! */
background-color: rgba(168, 79, 119, .75);
}

.tweakedFail2 {
background: rgb(101, 68, 107); /*IE6 and 7? Nope! Not if background-color is below!*/
background-color: rgba(101, 68, 107, .80);
}

Leave a Comment

Your email address will not be published. Required fields are marked *

 

%d bloggers like this: