Foros del Web » Creando para Internet » CSS »

Como hacer compatible el float left con IE6

Estas en el tema de Como hacer compatible el float left con IE6 en el foro de CSS en Foros del Web. Hay algun codigo para que internet explorer 6 reconozca el float left the los div? Tengo este código en unos "div" , que coloca 3 ...
  #1 (permalink)  
Antiguo 19/12/2008, 07:55
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Como hacer compatible el float left con IE6

Hay algun codigo para que internet explorer 6 reconozca el float left the los div?

Tengo este código en unos "div" , que coloca 3 cajas div una al lado de la otra, y solo el IE6 no lo hace y las deja verticales.
Código HTML:
.boxes{margin:0px 0px 1px 0px; float:left}
Código HTML:
<div class="boxes">
        <table id="Box 1" width="199" height="205" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3">
			<img src="images/box1_01.png" width="199" height="178" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/box1_02.png" width="72" height="27" alt=""></td>
		<td>
			<a href="date.php"><img src="images/box1_03.png" alt="" width="60" height="17" border="0"></a></td>
		<td rowspan="2">
			<img src="images/box1_04.png" width="67" height="27" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/box1_05.png" width="60" height="10" alt=""></td>
	</tr>
</table>
        </div>
        <div class="boxes">
        <table id="Box 2" width="199" height="205" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3">
			<img src="images/box2_01.gif" width="199" height="178" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/box2_02.gif" width="71" height="27" alt=""></td>
		<td>
			<a href="take_notes.php"><img src="images/box2_03.png" alt="" width="62" height="16" border="0"></a></td>
		<td rowspan="2">
			<img src="images/box2_04.gif" width="66" height="27" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/box2_05.gif" width="62" height="11" alt=""></td>
	</tr>
</table>
        </div>
        <div class="boxes">
        <table id="Box 3" width="199" height="205" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3">
			<img src="images/box3_01.gif" width="199" height="178" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/box3_02.gif" width="71" height="27" alt=""></td>
		<td>
			<img src="images/box3_03.png" width="62" height="16" alt=""></td>
		<td rowspan="2">
			<img src="images/box3_04.gif" width="66" height="27" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/box3_05.gif" width="62" height="11" alt=""></td>
	</tr>
</table>
        </div> 
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #2 (permalink)  
Antiguo 19/12/2008, 08:08
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Como hacer compatible el float left con IE6

si funciona mira este ejemplo y pruebalo:

Código:
#contenedor{ width:500px; height:auto; background-color:#CCCCCC; margin:0 auto; display:table;}
#caja1,#caja2,#caja3{
	width:140px;
	height:100px;
	background-color:#333333;
	border:1px solid #000000;
	float:left;
	margin:20px 10px 20px 10px;
}
.caja{
	width:140px;
	height:100px;
	background-color:#333333;
	border:1px solid #000000;
	float:left;
	margin:20px 10px 20px 10px;
}
Código HTML:
<div id="contenedor">
	<div id="caja1"></div>
	<div id="caja2"></div>
	<div id="caja3"></div>
	<div class="caja"></div>
	<div class="caja"></div>
	<div class="caja"></div>
</div> 
prueba ese código, lo que te debe estar pasando es un error de medidas por eso se muestran verticalmente
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 19/12/2008, 08:19
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Como hacer compatible el float left con IE6

Pero a mi me las tira vertical. Hay algo erróneo en el código?
Código HTML:
 <td width="614" height="513" align="center" valign="top" ><div id="scroll"> <br>
        <span class="style2">Welcome to our website...</span> <img src="images/mom.jpg" alt="mom" width="140" height="170" class="img_grande">
        <p class="style3">We are No Regrets, Inc., a Christian based, community organization providing support services to pregnant and single parent teens and young adults who are currently enrolled in school in pursuit of a high school diploma, GED, technical or undergraduate degree.</p>
        <p class="style3">We help our clients to finish high school, enroll and/or graduate from college and to achieve the goals and dreams they have despite the various and perplexing challenges they may face during parenting.</p>
        <p class="style3">We offer many great programs including mentoring, case management, child care services, parenting classes, nutrition and health risk education, community referrals and an opportunity for community engagement through volunteer work.</p>
        <p class="style3">If you are a teen or young adult single parent, we may be able to help you!  Submit a help request by accessing the &quot;get help&quot; link at the top of this page.</p>
        <div class="boxes">
        <table id="Box 1" width="199" height="205" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3">
			<img src="images/box1_01.png" width="199" height="178" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/box1_02.png" width="72" height="27" alt=""></td>
		<td>
			<a href="date.php"><img src="images/box1_03.png" alt="" width="60" height="17" border="0"></a></td>
		<td rowspan="2">
			<img src="images/box1_04.png" width="67" height="27" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/box1_05.png" width="60" height="10" alt=""></td>
	</tr>
</table>
        </div>
        <div class="boxes">
        <table id="Box 2" width="199" height="205" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3">
			<img src="images/box2_01.gif" width="199" height="178" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/box2_02.gif" width="71" height="27" alt=""></td>
		<td>
			<a href="take_notes.php"><img src="images/box2_03.png" alt="" width="62" height="16" border="0"></a></td>
		<td rowspan="2">
			<img src="images/box2_04.gif" width="66" height="27" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/box2_05.gif" width="62" height="11" alt=""></td>
	</tr>
</table>
        </div>
        <div class="boxes2">
        <table id="Box 3" width="199" height="205" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3">
			<img src="images/box3_01.gif" width="199" height="178" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/box3_02.gif" width="71" height="27" alt=""></td>
		<td>
			<img src="images/box3_03.png" width="62" height="16" alt=""></td>
		<td rowspan="2">
			<img src="images/box3_04.gif" width="66" height="27" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/box3_05.gif" width="62" height="11" alt=""></td>
	</tr>
</table>
        </div>
      </div></td>
  </tr> 
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #4 (permalink)  
Antiguo 19/12/2008, 08:22
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Como hacer compatible el float left con IE6

Código HTML:
@charset "utf-8";
/* CSS Document */

.style1{ /*links izq*/
	font-family:"Myriad Pro", Rockwell, Lucida Sans;
	font-size:15px;
	color:#ffffff;
	font-weight:bold;
	}
	
.style2{  /*titulos*/
	font-family:"Apple Garamond", Bodoni MT , Lucida Sans;
	color:#a66c27;
	font-size:25px;
	font-weight:bold;
	margin-top:auto;
	margin-right:25px;
	text-align:right;
}
.style3{ /*texto normal*/
	font-family:"Arial", Helvetica, sans-serif;
	font-size:12px;
	text-align:justify;
}
.style4{ /*texto bottom*/
	font-family:"Myriad Pro", Rockwell, Lucida Sans;
	font-size:11px;
	color:#ffffff;
}
.style5{ /*subtitulos morados*/
	font-family:"Apple Garamond", Centaur;
	font-size:18px;
	color:#934996;
	font-weight:bold;
}
.style6{/*subtitulos2*/
	font-family:"Apple Garamond", Centaur;
	font-size:16px;
	color:#990000;
	font-weight:bold;
}
	
.img_grande{margin:3px; float:left}
.img_grander{margin:3px; float:right}
.boxes{margin:0px 0px 1px 0px; float:left;}
.boxes2{margin:0px 0px 1px 0px; float:right;}

table, tr, td {
margin: 0;
padding: 0;
border-collapse: separate;
}

table {
margin: 0 auto;
}

#divarrow{
	margin:5px;
	margin-bottom:20px;
}
#scroll { 
	width:auto;
	height:100%; 
	overflow:auto; 
}
el boxes2 no estaba. Lo puse ahorita para probar.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #5 (permalink)  
Antiguo 19/12/2008, 08:24
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Como hacer compatible el float left con IE6

lo que esta mal es que estas maquetando medio en divs, medio en tablas!
Eso no pasa ni una validación!!
Has visto la aportación de Mikmoro para pasarse de tablas a divs..??

Aresillo!!
Willy, a ver si finiquitamos lo de la competencia...
  #6 (permalink)  
Antiguo 19/12/2008, 08:27
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Como hacer compatible el float left con IE6

hola Ares, creo que le colega esta en ese proceso de dejar las tablas, creo que lo lei en uno de sus post, bueno,

bueno Gvenon a mi se me ve bien, hay otro error, no puedes poner esto

Box 1
Box 2

no debes poner espacios en los id y clases

Ares
si estoy viendo como preparar la propuesta para presentar algo serio.
__________________
WFC
codigo82
  #7 (permalink)  
Antiguo 19/12/2008, 08:38
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Como hacer compatible el float left con IE6

Que tal Aresillo, pues si como dijo willyfc estoy en proceso de cambio y ando de a pocos.
El tuto de Mikmoro es el que estoy usando para hacer esto pero ya me quede pegado por el cochino explorer 6, porque en opera y Firefox se ve bien, pero el cliente tiene IE6 y los box se ven verticales y hasta un espacio en blanco entre 2 imágenes. http://noregretsinc.org/
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #8 (permalink)  
Antiguo 19/12/2008, 08:44
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Como hacer compatible el float left con IE6

Te recomiendo que utilices un reseteador para el css...
Por ejemplo:
*{
margin:0;
padding:0;
}

Con esto todo lo que pongas en el css tiene margin y padding 0 a no ser que le pongas otro en la etiqueta que quieras, con esto, evitas historias a la hora de diseñar...

Suerte!

Aresillo!!
  #9 (permalink)  
Antiguo 19/12/2008, 08:57
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Como hacer compatible el float left con IE6

Creo saber cual es el problema, vi tu web en chrome y se ve bien posicionado todo, en IE6 se te abre la columna izquierda un poquito dejando una línea blanca, y el problema de tus imagenes creo que puede ser el scroll que aparece en el contenido, prueba esto:

quitale unos pxs de ancho a las imágenes y de los td, por eso te dije que podría ser un problema de medidas, en IE6 tu contenido mas las imágenes no entran asi que eso hace que aparezca el scroll lo cual no pasa en los demas exploradores, por que el scroll no se ve, prueba con eso y avisas asi estaremos seguros de que no es un problema de medidas y buscaremos otra solución.
__________________
WFC
codigo82
  #10 (permalink)  
Antiguo 19/12/2008, 10:07
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Como hacer compatible el float left con IE6

Nop, me rindo, ya me atrase demasiado y no le llego, ni modo, por ahora a seguir con tablas. Gracias por su ayuda.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #11 (permalink)  
Antiguo 19/12/2008, 12:12
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: Como hacer compatible el float left con IE6

Creo que no has leído la guía con mucho detenimiento. Una de las cosas básicas que pongo es: un elemento de bloque (<div class="boxes"></div>) por defecto medirá el 100% del ancho de la ventana.

En tu caso, con el código que has puesto, sólo con que delimites el tamaño de esas cajas que contienen las tablas conseguirás lo que buscas tanto en IE6 como en FF:

.boxes{margin:0px 0px 1px 0px; float:left;width: 200px;}

Esto ocurre porque los divs tienen tablas dentro.

Déjate de medias tintas, y si quieres decidirte a abandonar las tablas para diseñar, hazlo desde cero y por completo, no mezcles tablas (y todos sus problemas), con divs y todo tu temor hacia ellos, porque así sólo conseguirás malos resultados, seguir asustado y acabar siempre volviendo a las tablas. Es como dejar de fumar: decídete a pasar una temporada un poco mala, pero una vez superado, todo parecerá más claro y sencillo eso sí, apostando 100% o nada.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 19/12/2008, 15:17
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Como hacer compatible el float left con IE6

Graciss Mik por la regañada. La verdad si quiero pero el problema es que entra tanto trabajo que trato de practicar con lo que pueda un poco. Esa página ya deberia estar lista y como me pegue con eso pues no me queda opción. Aún le falta el header con un poco de flash y que va. Pero apenas afloje un poco el trabajo sigo practicando. Si todos pueden yo tambien.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #13 (permalink)  
Antiguo 19/12/2008, 16:33
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: Como hacer compatible el float left con IE6

Cita:
Iniciado por gVenom Ver Mensaje
Graciss Mik por la regañada.
Me alegro de que se entienda bien por el lado positivo. Ya habrá momento de más tranquilidad para meterse a fondo.
__________________
Visita mi nueva web idplus.org
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 11:26.