Foros del Web » Creando para Internet » CSS »

Una DIV en firefox no se ve bien

Estas en el tema de Una DIV en firefox no se ve bien en el foro de CSS en Foros del Web. Hola a todos Tengo un div que agrupa otros 2 div dentro: Código: <div id="caja"> <div style="float:left; width:130px; height:auto; text-align:center"><img src="images/c/wallpaper.jpg" width="115" height="86" alt="Fondo de ...
  #1 (permalink)  
Antiguo 16/06/2006, 06:52
 
Fecha de Ingreso: junio-2003
Mensajes: 778
Antigüedad: 14 años, 6 meses
Puntos: 1
Una DIV en firefox no se ve bien

Hola a todos

Tengo un div que agrupa otros 2 div dentro:

Código:
<div id="caja">
	<div style="float:left; width:130px; height:auto; text-align:center"><img src="images/c/wallpaper.jpg" width="115" height="86" alt="Fondo de escritorio Climbinz Zone" title="Fondo de escritorio"></div>
	<div style="float:right; width:430px; height:auto; text-align:left">Descargate nuestro fondo de escritorio.
	<p><a href="images/c/wallpaper_1024.jpg" class="enlacenav" target="_blank">1024x768</a>&nbsp;&nbsp;&nbsp;<a href="images/c/wallpaper_800.jpg" class="enlacenav" target="_blank">800x600</a></p></div>
	</div>
La definicion de # caja es:

#caja {
width:570px;
height:auto;
border: solid 1px #CCCCCC;
text-align:center;
margin-top:8px;
margin-bottom:8px;
clear:both
}

En IE caja hace un marco que abarca a las 2 div que tiene dentro, pero Firefox el marco aparece sobre las 2 div del interior...

No acierto a corregirlo... ayuda please
  #2 (permalink)  
Antiguo 16/06/2006, 09:06
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 1 mes
Puntos: 3
cuando usas eletementos flotante la w3c dice que no deven ser parte directa del contenido estan flotando SOLO IE hace eso, para corregirlo necesitas poner una div abajo de los float con clear:both aqui te paso un ejemplo:

Cita:
CSS:
#caja {
width:570px;
height:auto;
border: solid 1px #CCCCCC;
text-align:center;
margin-top:8px;
margin-bottom:8px;
clear:both
}




HTML:
<div id="caja">
<div style="float:left; width:130px; height:auto; text-align:center"><img src="images/c/wallpaper.jpg" width="115" height="86" alt="Fondo de escritorio Climbinz Zone" title="Fondo de escritorio"></div>
<div style="float:right; width:430px; height:auto; text-align:left">Descargate nuestro fondo de escritorio.
<p><a href="images/c/wallpaper_1024.jpg" class="enlacenav" target="_blank">1024x768</a>&nbsp;&nbsp;&nbsp;<a href="images/c/wallpaper_800.jpg" class="enlacenav" target="_blank">800x600</a></p></div>
<div style="clear:both"></div>
</div>
Agrege la linea <div style="clear:both"></div>
__________________
Saludos
FT.
www.fernando.com.mx
  #3 (permalink)  
Antiguo 16/06/2006, 09:42
 
Fecha de Ingreso: junio-2003
Mensajes: 778
Antigüedad: 14 años, 6 meses
Puntos: 1
muchas gracias.

Solucionado

Ahora tengo este problema

<div align="center" style="height:auto; width:615px; float:left; border: solid 1px #CCCCCC; margin-bottom:12px; text-align:center; background-image:url(images/e/tit_media.jpg); background-repeat:no-repeat; background-position:top">

</div>

Y el contenido no se alinea al centro en firefox.. en IE y Opera si... Dentro tengo la capa #caja que definí más arriba...

Última edición por Operadormail; 16/06/2006 a las 09:50
  #4 (permalink)  
Antiguo 16/06/2006, 10:13
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 1 mes
Puntos: 3
no entiendo el probelma, puse el codigo que me diste y lo veo centrado FF y en IE no se en que parte del contenido va, hojala puedas poner todo el codigo para poder ayudarte mejor.
__________________
Saludos
FT.
www.fernando.com.mx
  #5 (permalink)  
Antiguo 16/06/2006, 10:45
 
Fecha de Ingreso: junio-2003
Mensajes: 778
Antigüedad: 14 años, 6 meses
Puntos: 1
Este es el codigo que no alinea en FF

<div align="center" style="height:auto; width:615px; float:left; border: solid 1px #CCCCCC; margin-bottom:12px; text-align:center; background-image:url(images/e/tit_media.jpg); background-repeat:no-repeat; background-position:top">
<p>&nbsp;</p>
<p>&nbsp;</p>
<div style="width:570px;
height:auto;
border: solid 1px #CCCCCC;
text-align:center;
margin-top:8px;
margin-bottom:8px"><img src="images/e/wallpaper.jpg" width="95" height="20"></div>
</div>

¿?
  #6 (permalink)  
Antiguo 16/06/2006, 12:55
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 1 mes
Puntos: 3
cuando pones bloque dentro de un bloque quieres alinearlo bloque no sirve la porpiedad text-align lo que tienes que hacer es usar para centrarlo es: marign:auto
algo asi.
Cita:
<div align="center" style=" width:615px; float:left; border: solid 1px #CCCCCC; margin-bottom:12px; text-align:center; background-image:url(images/e/tit_media.jpg); background-repeat:no-repeat; background-position:top">
<p>&nbsp;</p>
<p>&nbsp;</p>
<div style="width:570px;
border: solid 1px #CCCCCC;
text-align:center;
margin-top:8px;
margin:auto;
margin-bottom:8px"><img src="images/e/wallpaper.jpg" width="95" height="20"></div>

</div>
__________________
Saludos
FT.
www.fernando.com.mx
  #7 (permalink)  
Antiguo 19/06/2006, 02:16
 
Fecha de Ingreso: junio-2003
Mensajes: 778
Antigüedad: 14 años, 6 meses
Puntos: 1
funciono perfectamente.

Un saludo
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

SíEste tema le ha gustado a 1 personas (incluyéndote)




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