div transparency issues with IE

[Sharonig]

Hi,
I have a problem I’m really stuck with…
I have an error tooltip which has a transparent div that has visible divs that draw the little arrow. See image 0.jpg. It works fine in FF, Safari & Chrome. In IE, I got a white background.
For some reason the best results were when I added both the filter with the AlphaImageLoader for a transparent png file and ALSO a background image which is a transparent gif almost entirely (only one pixel of color). But in this case the divs that construct my arrow disappear as well. Any idea how to make them reappear?

I’m new to web coding, but this is really weird…

Do you have any idea what should I do? I’m afraid I cannot post a link.

Thanks,
Sharon

Anyway, here is the relevant CSS bits:

Code:

.ajax__validatorcallout div,
.ajax__validatorcallout td
{
border: solid 1px Black;
background-color: LemonChiffon;
}
.ajax__validatorcallout .ajax__validatorcallout_popup_table
{
display: none;
border: none;
background-color: transparent;
padding: 0px;
}
.ajax__validatorcallout .ajax__validatorcallout_popup_table_row
{
vertical-align: top;
height: 100%;
background-color: transparent;
padding: 0px;
}
.ajax__validatorcallout .ajax__validatorcallout_callout_cell
{
width: 20px;
height: 100%;
text-align: right;
vertical-align: top;
border: none;
background-color: transparent;
padding: 0px;
}
.ajax__validatorcallout .ajax__validatorcallout_callout_table
{
height: 100%;
border: none;
background-color: transparent;
padding: 0px;
}
.ajax__validatorcallout .ajax__validatorcallout_callout_table_row
{
background-color: transparent;
padding: 0px;
}
.ajax__validatorcallout .ajax__validatorcallout_callout_arrow_cell
{
padding: 8px 0px 0px 0px;
text-align: right;
vertical-align: top;
font-size: 1px;
border: none;
background-color: transparent;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’images/transparent.png’);
background: url(‘images/transparent1.gif’);
}
.ajax__validatorcallout .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv
{
font-size: 1px;
position: relative;
left: 1px;
border-bottom: none;
border-right: none;
border-left: none;
width: 15px;
background-color: transparent;
padding: 0px;

}
.ajax__validatorcallout .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv div
{
height: 1px;
overflow: hidden;
border-top: none;
border-bottom: none;
border-right: none;
padding: 0px;
margin-left: auto;
position: relative;
z-index: 500;
}

and this is the html:

Code:

The data exceeds maximum length.

[TheDoc]

Are you talking about IE6?

If so, try adding the "ie7.js" (search google for it) to your header and following its guide on using transparency with pngs. It has helped loads for me.

[Sharonig]

I posted a reply but for some reason it wasn’t submitted.. So, I’m sorry if this message appears twice.

Anyway, thank you for your answer. However, I’m afraid I’m using IE8. I tested on IE7 and there the situation is even more grim… The arrow triangle is transparent and the background that is supposed to be transparent is white…

[Rob MacKay]

Do you have a live link to it by chance? :D Would be good to have a look with the bug of fire… :)

[Sharonig]

I’m afraid I cannot post a link. However, when I tried to compose a compact example I found the issue, but don’t know how to explain it or work around it.

As it seems, although the containing div is set to background color transparent in JS, in IE it isn’t applied and the containing div’s background is set to white… No need to any transparent gif…

Anyway, does anybody know what happened here and why the background-color wasn’t set correctly in IE? Do I need an additional CSS property or maybe the trouble is that it is set in JS code?

Thanks,
Sharon

[Sharonig]

ok, I’ve found the problem.

We use AJAX Control Toolkit’s Animation. As it seems, during the animation it adds a filter with opacity. When it finishes, it just leaves the filter there, and therefore I can see the div.

Thank you all,
Sharon

[Author]

Posts