[RESOLVED] FireFox css Vs. IE Css

[rrrctraptor31]

I am having an CSS issue. I am making a CSS tooltip thgat when you put you mouse over a phrase that it would popup info. I have it working in FireFox...but in IE it is making it see thru. Here is the CSS code:

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
FILTER: alpha(opacity=100);
background-color: lightgray;
padding: 5px;
left: -1000px;
border: 1px solid black;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span div{ /*CSS for enlarged image*/
background-color: lightgray;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -90;
left: -400px; /*position where enlarged image should offset horizontally */

}

HTML code:

<A class="thumbnail" href="#">Password Strength:<span><div CLASS=DATA style=" FILTER: alpha(opacity=100);background-color: lightgray; overflow: auto; z-index: 99; box-sizing: border-box; -moz-box-sizing: border-box; width: 400px; height: 200px;">
<font class=datatitle>Create a strong, memorable password in 6 steps http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/#thumb</font>
Use these steps to develop a strong password:</P>
1. <B>Think of a sentence that you can remember.</B> This will be the basis of 
your strong password or pass phrase. Use a memorable sentence, such as "My son 
Aiden is three years old."<BR>

<BR>
2. <B>Check if the computer or online system supports the pass phrase 
directly.</B> If you can use a pass phrase (with spaces between characters) on 
your computer or online system, do so.<BR>
<BR>
3. <B>If the computer or online system does not support pass phrases, convert it 
to a password.</B> Take the first letter of each word of the sentence that 
you've created to create a new, nonsensical word. Using the example above, you'd 
get: "msaityo".<BR>
<BR>
4. <B>Add complexity</B> by mixing uppercase and lowercase letters and numbers. 
It is valuable to use some letter swapping or misspellings as well. For 
instance, in the pass phrase above, consider misspelling Aiden's name, or 
substituting the word "three" for the number 3. There are many possible 
substitutions, and the longer the sentence, the more complex your password can 
be. Your pass phrase might become "My SoN Ayd3N is 3 yeeRs old." If the computer 
or online system will not support a pass phrase, use the same technique on the 
shorter password. This might yield a password like "MsAy3yo".<BR>

<BR>
5. <B>Finally, substitute some special characters.</B> You can use symbols that 
look like letters, combine words (remove spaces) and other ways to make the 
password more complex. Using these tricks, we create a pass phrase of "MySoN 8N 
i$ 3 yeeR$ old" or a password (using the first letter of each word) 
"M$8ni3y0".<BR>
<BR>
6. <B>Test your new password with Password Checker. </B> Password Checker is automatically
included when you type in your password for the first time. It will help determine your password's 
strength as you type.
</DIV>
</span></a>

Example Pictures:

FireFox:



IE:



I need all the help i can get

[TheBigB]

Assuming you're using IE6;
IE doesn't support PNG-24 by default.

But this hack should help you.
From: http://www.webdesignerwall.com/tutor...t-text-effect/

<!--[if lt IE 7]>

<style>
h1 span {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>

<![endif]-->

[rrrctraptor31]

FF 2.0.0.somthing and IE 7.0

[Nightwalker83]

Info from:

http://www.w3.org/TR/css3-color/#transparency

<!--[if gte IE 7]>
<style>
.data {
background-color: #C0C0C0;
 }
 </style>
<![endif]-->

[rrrctraptor31]

so i basically change:

background-color: lightgray;

to:

background-color: #C0C0C0;

[rrrctraptor31]

Yep that was it...YAY