div transparent background with ie

Question

i try to use the carousel structure below

carousel

the problem is the background (link with description on left side) semi transparent and it works fine with opera,firefox,chrome,safari except ie6. ie6 displays it without that transparentcy.how to change to display as other browsers?

Answer 1

The problem with your solution is that it tries to achieve the transparency with an image file:

#featured .ui-tabs-panel .info{ 
    position:absolute; 
    bottom:0; left:0; 
    height:70px; 
    background: url('images/transparent-bg.png'); 

Internet Explorer < 7 cannot correctly draw true PNG transparency because it sucks.

The solution on your end is that you are lucky and don't need true image transparency. Instead, you can use the opacity CSS modifier. Search google for "CSS opacity", this is one of the first hits: http://www.quirksmode.org/css/opacity.html

To make this always work as expected (i.e. the text itself is not transparent) you will have to do additional tricks. E.g. layer a second <div> element under the real one (not cascading them!), or cascade them and hope you may override opacity in child elements, or .... That's why in the original version, the trick with transparent image was used.

It clearly shows how badly IE sucks. I would just deprecate it, as I do with my websites.