virtual earth makes autocomplete half transparent in firefox

hi, i just spent almost a day on this. any help/advices would really be appreciated.

i attempted to put 2 of the coolest asp.net tools to work together on the same page, but found that it doesn't work for firefox.

i have the autocomplete in "SampleWebSite" working, but as soon as i added the below VE js reference, the auto-complete list went half-transparent and went behind the map area.

<script language="javascript" src="http://pics.10026.com/?src=http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"></script>

so, i provided my own div element with a very high z-index, but it's still half transparent. it only happens in firefox.

<div id="completingName" style="z-index:999999;"></div>

see this, http://208.75.249.11/map.jpg

thank you very much.

Are you using the latest version of the Toolkit? What is the behavior in other browsers? What is the z-index of the flyout and the ve control?

i believe i am using the latest version of asp.net ajax toolkit because i just downloaded it this morning. virtual earth is 5.0.

other IE is fine, no problem. i just have problem with firefox (http://208.75.249.11/map.jpg), don't know about others.

thank you very much.

Could you please provide the repro? Thanks.

Not sure if this helps, but I had a transparency problem with firefox too. I used the exact styles from the AutoComplete sample and got the following problems in Firefox:

1) the items in the list were all indented by about 20 pixels (whereas in IE all the items in the list were left-aligned with the start of the text box.)

2) Textboxes underneath the autocomplete list were showing through the list, they weren't being covered when the autocomplete list appeared.

I'm not great with CSS, but a colleague was able to fix the issue by making the following CSS changes (the original styles were copied from the Autocomplete sample on this site):

in class ".autocomplete_completionListElement"

change "background-color:inherit;" to "background-color : #fff;"

and add a new style to the class:

"padding:0;"

So you end up with:

.autocomplete_completionListElement
{
visibility : hidden;
margin : 0px!important;
background-color : #fff;
color : windowtext;
border : buttonshadow;
border-width : 1px;
border-style : solid;
cursor : 'default';
overflow : auto;
height : 200px;
text-align : left;
list-style-type : none;
padding:0;
}

Hope this helps,

Ollie