Aquí os muestro el código:
Código:
El boton tiene una altura de 21px El caso es que en firefox, a pesar de haber puesto top: 20px, al mostrar la lista de tamaños aparece un poco desplazada hacia abajo, como veis en este imagen:div#BotoneraEditor /*CAPA QUE CONTIENE TODA LA FILA DE BOTONES*/
{
background-color: #ffffcc;
padding: 3px;
}
.botonAgrupado /*DIV QUE AGRUPA EL BOTON (IMG) DE TAMAÑO Y LA CAPA CON LA LISTA DE TAMAÑOS*/
{
z-index: 2;
display: inline;
position: relative;
padding: 0px;
margin: 0px;
}
.icono img /*BOTON*/
{
border: 1px solid #CCCCCC;
margin: 0px 1px;
/*z-index: 1px*/
}
#listaSize /*CAPA CON LA LISTA DE TAMAÑOS*/
{
display: none;
position: absolute;
left: 0px;
top: 20px;
z-index: 3;
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
}
Y en explorer ocurre al revés, que se monta un poco sobre el botón, Y LO QUE ES PEOR, el botón de al lado (color de fuente) está sobre la lista de tamaños, como veis en esta imagen...
Os pongo el código HTML por si os ayuda:
Código:
La pregunta es como ajustar exactamente la lista de tamaños al borde inferior del botón "tamaño de fuente" en ambos navegadores y como evitar que los botones de al lado se vean por encima de la lista en explorer... <div class="botonAgrupado">
<a class="icono" href="javascript:mostrarSize('')"><img src="clases/img_editor/size.gif" alt="Tamaño de fuente" title="Tamaño de fuente"/></a>
<%listaSize()%> <!--ESTE ESCRIBE EL HTML CON LA LISTA DE TAMAÑOS, ES UNA TABLA-->
</div>
<div class="botonAgrupado">
<a class="icono" href="javascript:mostrarPaleta('C', '')"><img src="clases/img_editor/color.gif" alt="Color de fuente" title="Color de fuente" /></a>
<%paletaColores("C")%> <!--ESTE ESCRIBE EL HTML CON UNA TABLA DE COLORES-->
</div>
Muchas gracias
Mode Lineal
