Free Consultation: +1 (888) 374 0906

If you have ever browser checked one of your designs and wondered why one paragraph is slightly lower down in one browser to another I have the answer for you:

Browsers come 'pre-formatted' with their own definitions for the most common tags. Using a reset rule can go a long way to achieving pixel perfection across all browsers. There are many css reset rules around the internet. They range from quite complex to a simple single line.

Here are some examples:

  1. My reset I commonly use
    p,h1,h2,h3,h4,h5,h6{margin: 0 0 8px 0;}

  2. Getting slightly more complex
    body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}

  3. Tantek Reset

  4. Eric Meyer's Reset


A Case for Not Using a CSS Reset

Why might you not want to use a reset? Well. You may not want to take the time to redefine all the margins and padding for your lists or everything else you just turfed with your reset. Maybe it is completely unnecessary because you like the defaults. For me I only reset the p tag and headings because it helps to achieve a more consistent typography layout.  Our game is content management and if I can give my end users a more predictable(read: pleasant) experience when they are laying out their content then I have done my job.
Occasionally I will re-declare the list elements as well for the same reason.

The trouble with resetting some values is that it makes them not display in the SiteCM editor in older less compliant browsers. You may find that applying the KISS method is best.
Write A Comment

Post A Comment

 
Submit

Sign up for email updates from our team

View Our Privacy Policy or Terms of Use