Hola!
Estoy trabajando con un modelo modificado del Acordeón de MooTools y va todo bien hasta ahora. En los headers de título coloqué una imagen a la derecha con float:right y el texto a la izquierda con text-align:left. El problema viene cuando en tres navegadores se ve diferente y sólo Opera hace el diseño como yo quiero (seguro hago algo mal jaja). Una imagen vale mas que mil palabras:
Como veran, en IE6 se crea dos saltos de línea, en Firefox la imagen sale del div y en Opera es como me gustaría que funcionara. En IE7 no he podido probarlo.
Este es el codigo CSS:
Código:
.accordion_headings{
padding: 5px;
background:#99CC00;
color:#FFFFFF;
border:1px solid #fff;
cursor:pointer;
font-weight:bold;
height: 26px;
line-height: 26px;
text-align: left;
}
.accordion_headings img {
float: right;
}
Y este el HTML:
Código:
<div id="header1" class="accordion_headings" > Nosotros <img src="img/nosotros.png" /></div>
¿Qué está mal?
Gracias
Samuel