peivem.com cerrará sus puertas
Esta entrada ha sido publicada en mi nuevo blog, en:
http://www.sebastianbarria.com/web/firefox-e-ie-vs-desarrollador-solucionando-bugs/
Por favor, visita mi nuevo sitio, porque este lo daré de baja muy pronto. Gracias!

Casi siempre, al momento de crear el código HTML de una página web, nos encontramos con la "sorpresa" de que cada navegador interpreta las cosas como quiere, o que presentan fallas inesperadas sobre las cuales no tenemos el control, más conocidas como "bugs".

Acá se presentan algunas soluciones a los típicos problemas a los que nos vemos enfrentados al momento del desarrollo o de las pruebas.

Doble margen horizontal en IE6

Al utilizar FLOAT acompañado de un MARGIN, IE6 muestra márgenes del doble del espacio que corresponde.

.elementox{
float: right;
margin-right: 20px;
}

Por ejemplo, si se tiene un elemento que flota a la derecha, y se define un margin-right: 20px;, en IE6 se verá un margen de 40px. Para solucionar esto, se debe definir bajo float, display:inline;

.elementox{
float: right;
display: inline;
margin-right: 20px;
}

Caracteres duplicados en IE6

A veces, IE6 duplica caracteres de forma inexplicable. Esto sucede por 2 razones principales:

• Existen muchos comentarios en el código HTML.
• Cuando hay muchos objetos que flotan, el último objeto está tocando el borde del div que lo contiene.

Generalmente, la manera más fácil de resolverlo es dándole un margen derecho de 3px (mínimo) al objeto, para que no esté topando con el borde del div.

Bordes de links en Firefox

Para eliminar el borde de los links demarcado con una línea punteada en Firefox, se le debe agregar la propiedad outline: none; a los links.

Altura 0 del Clear Fix en IE6

Internet Explorer 6 no deja crear divs de altura 0, como en la clase clear_fix. Para lograr esto, la clase se debe hacer de la siguiente manera:

.clear_fix{
clear: both;
height: 0;
max-height: 0;
overflow: hidden;
}

Adicionalmente, es recommendable darle un width: 90%; para evitar que esta clase expanda la columna donde está anidada, o se traslape con otros clear_fix que esten paralelos (porque al ser un div, por defecto ocupa un 100% del espacio).

Divs expandibles al aumentar el tamaño del texto

Cuando se crean divs con una altura fija, utilizando la propiedad "height" en CSS, es posible que algunos navegadores (como Firefox) no expandan las casillas si el texto que hay en su interior crece (al utilizar la herramienta para aumentar el tamaño del texto en el navegador).

Frente a este problema, el comportamiento de Internet Explorer es el de expandir la caja de texto, sin embargo, Firefox no lo hace. Por otro lado, Firefox (e Internet Explorer 7) reacciona a la propiedad "min-height", con la que la casilla adquiere un tamaño fijo y si el contenido en su interior se expande, la caja también lo hace.

Supuestamente, o se opta por utilizar height (dejando de lado a Firefox), o por min-height (dejando de lado a IE6). Sin embargo, existe una solución que permite utilizarlo en ambos navegadores, que corresponde a darle a un div (para este ejemplo con la clase "caja" aplicada):

.caja {
min-height: 500px;
height: auto !important;
height: 500px;
}