Tamaño base del texto igual en todos los navegadores

Dado que ciertos navegadores toman un tamaño de texto nombrado como un tamaño y otros navegadores lo toman de otra manera, es necesario utilizar el siguiente hack:

body {

font-size: small;

}

* html body {

font-size: x-small; /* for IE5/Win */
f\ont-size: small; /* for other IE versions */

}

Limpiar floats que no se limpian con clear both

Por algún motivo, clear: both no acaba de funcionar cuando hay diferentes combinaciones de floats dentro del contenedor. Para solucionarlo, se puede probar a utilizar los siguientes estilos de CSS para el contenedor que contiene los floats:

overflow: auto;
height: auto;

Solucionar compatibilidades entre navegadores en CSS

Para evitar problemas de compatibilidades entre diferentes navegadores, sobre todo en cuanto se usen listas, conviene añadir lo siguiente a la hoja de estilos CSS:

* { margin:0; padding:0; border: 0; }

Estilo de menús horizontales en CSS usando ambos navegadores

Uno de los elementos específicos que siempre crea problemas de compatibilidad entre los dos navegadores principales, Firefox y IE, son los menús horizontales. Hay que jugar con la propiedad margin tanto de esa capa como la que le precede, intentando combinaciones de números positivos y negativos en ambos para acabar ajustando ambos. Por ejemplo:

#PaisesContenedorLogo{

width: 700px;
height: 132px;

background-color: #888888;

background: url("../img/logo.jpg");
background-repeat: no-repeat;
margin-bottom: 16px;


}

#PaisesContenedorMenu{

background-color: #95b48b;
color: #000000;
height: 30px;
margin-top: -16px;

}

En el caso expuesto, 'PaisesContenedorLogo' está situada por encima de 'PaisesContenedorMenu' y en la misma capa, pero, como se ve, los margin no parecen muy racionales.

Tabulación simple con CSS

|span style='margin-left:20px;'>

Sustituir la barra vertical del comienzo por < .