Restablecer CSS

Me estaba volviendo loco con los dichosos estándares y con las diferencias entre navegadores. Os comento, Hasta ahora tenia fallos tipo esto:

IE:

 

ieminipost.jpg

Fire Fox:

 

firefoxminipost1.jpg

 

IE

ffside.jpg

FIREFOX

ieside.jpg

Y mira que he mirado código y no conseguía solucionar nada. Asi que fui a lo drástico. Cosa que tenia que haber echo antes. Desde que leí el reseteo del CSS via csslab.cl que empecé a integrarlo a mis trabajos web, pero hace poco en freakevolution.com.ar que han dado con el clavo.
Yo lo que he hecho a sido crear un archivo css llamado reset.css con el siguiente código.

PLAIN TEXT
CSS:
  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, font, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. b, u, i, center,
  7. dl, dt, dd, ol, ul, li,
  8. fieldset, form, label, legend,
  9. table, caption, tbody, tfoot, thead, tr, th, td {
  10. margin: 0;
  11. padding: 0;
  12. border: 0;
  13. outline: 0;
  14. font-size: 100%;
  15. vertical-align: baseline;
  16. background: transparent;
  17. }
  18. body {
  19. line-height: 1;
  20. }
  21. ol, ul {
  22. list-style: none;
  23. }
  24. blockquote, q {
  25. quotes: none;
  26. }
  27. blockquote:before, blockquote:after,
  28. q:before, q:after {
  29. content: '';
  30. content: none;
  31. }
  32.  
  33. /* remember to define focus styles! */
  34. :focus {
  35. outline: 0;
  36. }
  37.  
  38. /* remember to highlight inserts somehow! */
  39. ins {
  40. text-decoration: none;
  41. }
  42. del {
  43. text-decoration: line-through;
  44. }
  45.  
  46. /* tables still need 'cellspacing="0"' in the markup */
  47. table {
  48. border-collapse: collapse;
  49. border-spacing: 0;
  50. }

 

Con esto es poner a cero todas y cada una de las variables que crean los navegadores (IE) por que les da la gana. Conseguiremos unificar las características y así no nos llevaremos sorpresas en nuestros diseños.

Luego únicamente llamamos al reset.css desde nuestro css principal, normalmente usamos el style.css.

PLAIN TEXT
CSS:
  1. @import url("reset.css");

ES IMPORTANTE COLOCAR LA LLAMADA ANTES DE ASIGNAR VALORES A NUESTRO CSS, YA QUE DESPUES VOLVEMOS A DARLE NUEVOS VALORES

Sobre este Post

Actualmente estas leiendo “Restablecer CSS,” del Blog:
El blog de SuperGuille

Publicado:
02.16.08 / 7pm
Categoria:
CSS