Problema con float y line-height en una imagen

[Threepwood]

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

[Mikmoro]

El problema viene de poner dentro del div texto directamente y una imagen.

Lo correcto para que se vea igual en todos los navegadores sería añadir un span para el texto y flotarlo a la izquierda, así que garantizas que el texto ocupa su sitio adecuado y la imagen también:

<div id="header1" class="accordion_headings" ><span> Nosotros </span><img src="img/nosotros.png" /></div>

Y en la css añades:

.accordion_headings span {float: left;}

[SamueMX]

Mikmoro:

Gracias por tu respuesta, fue la solución. También gracias por la sugerencia en el otro topic sobre el slide. Terminé usando Mootools y funciona perfecto.

Saludos

samuel.