Foros del Web » Creando para Internet » CSS »

Problema con float y line-height en una imagen

Estas en el tema de Problema con float y line-height en una imagen en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/08/2008, 21:19
Avatar de Threepwood  
Fecha de Ingreso: febrero-2002
Ubicación: Argentina
Mensajes: 892
Antigüedad: 15 años, 10 meses
Puntos: 3
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
  #2 (permalink)  
Antiguo 11/08/2008, 02:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con float y line-height en una imagen

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:

Cita:
<div id="header1" class="accordion_headings" ><span> Nosotros </span><img src="img/nosotros.png" /></div>
Y en la css añades:

Cita:
.accordion_headings span {float: left;}
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 11/08/2008, 11:43
 
Fecha de Ingreso: marzo-2007
Mensajes: 6
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Problema con float y line-height en una imagen

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:57.