El diseño, Firefox, Explorer y yo
January 19, 06 by serumaxEste es el mejor título para la novela de encuentros y desencuentros entre Firefox, Internet Explorer, las hojas de estilo y yo. Una novela que comenzó cuando quise hacer una plantilla a tres bandas, al modo de Alt1040 o FayerWayer. En el primer capítulo me bajé un par de plantillas de tres columnas para estudiarlas un poco. No se veía nada complicado, pero un par de “position: absolute” me incomodaron un poco y decidí seguir investigando para buscar una solución más estándar y flexible. Una vez que tuve lo que necesitaba: la etiqueta “float”, el resto se veía fácil.
La estructura de WordPress divide el contenido en una cabecera, la sección de los post (el loop), el sidebar o barra lateral y el footer. Por lo que simplemente había que dividir el sidebar en dos. Fue pan comido.
.sidebar_derecha{
float: left;
width: 44%;
padding: 0px;
}
.sidebar_izquierda{
float: right;
width: 44%;
padding: 0px;
}
Así todo lo que quisera poner en el lado derecho del sidebar simplemente lo encerraba entre <div class=”sidebar_derecha”> y los mismo para el lado izquierdo <div class=”sidebar_izquierda”>. Aunque realmente no funcionó a la primera, debido a que tenía un error en los anchos de la página, de la cabecera y del sidebar. Pero una vez ajustado todo milimétricamente, el diseño comenzó a cuadrar como quería. Claro, hasta que dejóde gustarme como se veían alguna secciones del sidebar en un espacio de 130px de ancho. La idea entonces fue que la parte superior del sidebar tuviese un ancho de 300px y a continuación poner las dos columnas más angostas.
Ahí comenzó la batalla, porque por razones que habría que consultar a Gates, los resultados de Firefox distaban mucho de los conseguidos en Internet Explorer. Si en Explorer se veía bien en Firefox no, o a la inversa. Después de un par de horas (cerca de las 2:00 am) llegué a esto para el loop:
.narrowcolumn {
float: left;
padding: 0px;
margin: 0px;
width: 600px;
\width: 600px;
w\idth: 600px;
}
.widecolumn {
float: left;
padding: 0px;
margin: 0px;
width: 600px;
\width: 600px;
w\idth: 600px;
}
y para el sidebar:
#sidebar{
float: right;
width: 300px;
\width: 300px;
w\idth: 255px;
margin: 30px 30px 0 0;
padding: 0px;
}
En realidad es algo extraño y parece que no es una solución completamente ajustada a las reglas. Pero funciona. Lo que haces es ajustar un ancho de 255 para Explorer y uno de 300 para Safari y Firefox. Pero lo más extraño de todo es que para Explorer 255px valgan lo mismo que 300px de Firefiox (según me he enterado después, firefox cuenta los bordes y padding para asignar el ancho, Explorer no lo hace).
Pero para complicar más aún el asunto se me ocurrió que sería genial romper un poco el esquema y luego de las dos columnas angostas volver con una ancha donde poner un miniblog. Definitivamente fue lo más complicado, pues ni Firefox ni Explorer funcionaron como esperaba.
El problema es que si el sidebar izquierdo es más largo que el derecho, el float izquierdo se come cualquier elemento que uno ponga en la parte inferior. Es decir lo ajusta a su derecha, en el espacio que sobra bajo el float derecho.
La primera solución que intenté fue meter el float izquierdo y el derecho dentro de una especie de contenerdor entre divs, esto solucionó el problema en Explorer, pero en Firefox no produjo ningún cambio. La solución final fue esta
/* for Mozilla/Safari/Opera */
*>.contenedor {
margin: 0 0 1000px 0;
padding: 0px;
}
/* for IE, with IE5/Mac backslash filter \*/
* html .contenedor {
height: 880px;
}
Ya sé, no es la solución más correcta pero de momento es lo mejor que he encontrado y que funciona.
Actualización: Ismael, webmaster de estadobeta.com, me sugirió usar una clase llamada clearfix, que al parecer es bastante conocida en el medio del diseño web y ha funcionado genial:
/* Este es de positioniseverything.com
Y evita que colapsen los contenedores de floats */
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Para usarla correctamente la etiqueta div debe ir como en este ejemplo:
<div class=”clearfix” id=”contenedor_o_cuchara”>
siendo en el id “contenedor_o_cuchara” se ajustan en realidad los colores, fuentes, anchos, etc. de la sección X
#contenedor_o_cuchara{
width: 300px;
margin: 0px;
padding: 0px;
}
