Monday 1 March 2010

Opacity in IE7/8

Debugging proves to be what a web designer spends most of their time doing.

On the homepage, the slideshow which demonstrates what people can expect to find on the inner pages uses an alpha value to apply opacity.

Unsurprisingly, IE doesn't yet support the rgba tag yet.

UPDATE - just realised that rgba is a CSS3 tag and so older Firefox etc won't even support it. This means using the less useful opacity tag which unfortunately makes all children within have opacity too :( Help provided here. The opacity damages legibility so I'm going to just provide a PNG for as a background-image.


I found a developer online who has coded a quick app to translate the regular background-color: rgba(229,124,19,0.7); but for Internet Explorer 8,

into

{background:transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2E57C13,endColorstr=#B2E57C13);zoom: 1;}
which you can stick in conditional comments for IE.
This works for IE8, but not IE7. Grrr

@


No comments: