Posted By

michellebracken on 08/18/11


Tagged


Versions (?)

Using a CSS Reset for Cross-Browser Compatibility


 / Published in: CSS
 

One of the issues in cross-browser web development is that different browsers use different default values for various CSS properties. By explicitly setting a property like margin to be 0 for certain html elements we can assure that the margin will be 0 on that element in all browsers. The best way to do that is to use a CSS reset file like the ones developed by Eric Meyer or Yahoo or you can develop your own. Using a CSS reset ensure that all browsers are on the same page so to speak.

  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. dl, dt, dd, ol, ul, li,
  7. fieldset, form, label, legend,
  8. table, caption, tbody, tfoot, thead, tr, th, td {
  9. margin: 0;
  10. padding: 0;
  11. border: 0;
  12. outline: 0;
  13. font-weight: inherit;
  14. font-style: inherit;
  15. font-size: 100%;
  16. font-family: inherit;
  17. vertical-align: baseline;
  18. }
  19. /* remember to define focus styles! */
  20. :focus {
  21. outline: 0;
  22. }
  23. body {
  24. line-height: 1;
  25. color: black;
  26. background: white;
  27. }
  28. ol, ul {
  29. list-style: none;
  30. }
  31. /* tables still need 'cellspacing="0"' in the markup */
  32. table {
  33. border-collapse: separate;
  34. border-spacing: 0;
  35. }
  36. caption, th, td {
  37. text-align: left;
  38. font-weight: normal;
  39. }
  40. blockquote:before, blockquote:after,
  41. q:before, q:after {
  42. content: "";
  43. }
  44. blockquote, q {
  45. quotes: "" "";
  46. }

Report this snippet  

You need to login to post a comment.