Como hacer compatible el float left con IE6

[gVenom]

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> 

[willyfc]

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

[gVenom]

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> 

[gVenom]

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.

[Aresillo]

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...

[willyfc]

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.

[gVenom]

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/

[Aresillo]

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!!

[willyfc]

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.

[gVenom]

Nop, me rindo, ya me atrase demasiado y no le llego, ni modo, por ahora a seguir con tablas. Gracias por su ayuda.

[Mikmoro]

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.

[gVenom]

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.

[Mikmoro]

Iniciado por gVenom

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.