Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/08/2008, 20:19
Avatar de Threepwood
Threepwood
 
Fecha de Ingreso: febrero-2002
Ubicación: Argentina
Mensajes: 906
Antigüedad: 22 años, 9 meses
Puntos: 4
Problema con float y line-height en una imagen

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
__________________
Equívocos sin importancia