1. Estilo y Contenido separado
Aprender a separar el diseño de nuestro contenido es de vital importancia, tanto para el posicionamiento como para la definición de estilos en nuestras páginas web.
2. Inicializar el Entorno de trabajo
Por increíble que parezca una buena practica para los sitios que llevaran css es iniciar el entorno, esto nos permite una hoja en blanco y prácticamente similar en todos los navegadores.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
line-height: 1;
font-family: inherit;
text-align: left;
}
Esta linea lo que hare es crear una hoja en blanco sin estilos en los navegador, lo unico que hay que tomar en cuenta es que tenemos que definir nosotros cada uno de los objetos, como letras bold, cursivas, h1, pero esto le dara mayor personalizacion a nuestra hoja de estilos.
3. Primero relative despues absolute
Para los divs anidados donde normalmente queremos contener objetos en posiciones fijas normalmente se utiliza
position:absolute;
pero por caracteristicas de explorer esto nos rompe el diseño, tomando este absolute como posicion con respecto al navegador, para poder solucionar esto en el div principal coloquen
position:relative;
y a los interiores:
position:absolute;
Con esto nunca volverán a sufrir que IE rompe con la estructura de sus CSS
4. Siempre en orden
z-index, el indice de las capaz es muy útil, sobre todo para definir que elementos de un diseño ira en determinado nivel, sin embargo en explorer siempre hay problemas con la posicion de estas capas, sobre todo cuando colocamos un z-index, único para indicar que este ira arriba de todo.
Por ejemplo un z-index:20; par indicar que este ira en la mayor posición.
La verdadera solución es colocar un z-index para cada objeto que estará involucrado en el orden especifico sin saltarse. z-index:1, z-index:2, etc.
5 Olvidate de los hacks
Los CSS hacks son muy útiles sobre todo para cuando empiezas, pero si sigues los 4 consejos anteriores te olvidaras de ellos, son malos por dos razones, una le agregan peso a tus css, y es prácticamente hacer una hoja de estilo por navegador.
