CSS y IE6 :'(

[Yerkito]

Buenas tengo un problema con el IE :D
Tengo un div, con visibility: hidden; y con javascript cuando un imput type="text" tiene el focus pasa ese visibility:visible. Creando un efecto de bocadillo de comic, donde explica las condiciones para rellenar ese formulario.

El problema es que con Firefox me va de perlas pero con IE6... ejem sale el bocadillo detras de los imputs y como que no queda muy bonico :S

Código HTML:

<style type="text/css">


dl {
	font:normal 12px/15px Arial;
    width: 350px;
}
dt {
    clear: both;
    float:left;
    width: 130px;
    padding: 4px 0 2px 0;
    text-align: left;
}
dd {
	float: left;
	width: 200px;
	padding-left: 6px;
	position: relative;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 8px;
	margin-left: 0;
	
}

.aide {
	z-index: 1;
	position:absolute;
	top: 0px;
	left: 50px;
	width: 200px;
	color: #496f00;
	text-align: center;
	filter: alpha(opacity:50);
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;
	visibility: hidden;
}

.aide div.top{
	padding: 40px 8px 0 0;
	background: url(bubble.png) no-repeat top;
	
}
.aide div.middle{ /* different middle bg for stretch */
	
	padding: 0 8px; 
	background: url(bubble_filler.gif) repeat bottom; 
	
}
.aide div.bottom{
	
	padding:3px 8px 15px 0;
	color: #ff6600;
    background: url(bubble.png) no-repeat bottom;
	
}
</style> 

Código HTML:

<dl>
       <dt>
		<label for="firstname">Nombre</label>
	</dt>
	<dd>
		<input name="firstname" id="firstname" type="text" />
		<div class="aide">
                    <div class="top"></div>
                    <div class="middle">Primer nombre :D</div>
                    <div class="bottom"></div>        
                </div>	
         </dd>
<dt> 

NOTA: Este es un ejemplo que encontre en una WEB de trucos CSS, y que estoy modificando :D

GRACIAS :D