Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

CSS reset for browser compatibility

One of the main issues in web development is to make sure you website looks the same (or at least acceptable) in most popular browsers like IE, Mozilla, Opera and Safari. And although it is advised to keep css smaller for faster page load, sometimes you'll need to abuse this rule, to achieve  browser compatibility goal.

This time it's not about IE and it's "special interpretation" of unambiguous standards, you can learn how to Make IE to behave like normal browser here, but this time it's about default values of elements in each browser. Problem is, that if you won't define, for example alignment for p element, then browser will accept it's default value, for some it might be left alignment, for others centered. The workaround for this problem is CSS reset.

Here is a code-snippet of most common CSS reset collection:
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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Basically we are defining default values for each element we are using in our website. Of course you can just copy snippet and use it in every website you make, but to make css file smaller, you might want to throw out elements that you don't use.

Source: http://meyerweb.com/eric/tools/css/reset/index.html


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus