Andy clarke's "Universal Internet Explorer 6 CSS" vs Eric meyer "CSS Reset".

Question

Universal Internet Explorer 6 CSS

CSS Code :

/* -------------------------------------------------------------- 
Standardised Internet Explorer 6 stylesheet:
http://forabeautifulweb.com/blog/about/universal_internet_explorer_6_css/

Based on the work of:
Mark Boulton: http://markboulton.co.uk
Eric Meyer: http://meyerweb.com
Cameron Moll: http://www.cameronmoll.com/
Richard Rutter: http://clagnut.com
Khoi Vinh: http://subtraction.com

-------------------------------------------------------------- */

html,           body, 
div,            span, 
object,         iframe, 
h1, h2, h3, h4, h5, h6, 
p,              blockquote, 
pre,            a, 
abbr,           acronym, 
address,        code, 
del,            dfn, 
em,             img, 
q,              dl, 
dt,             dd, 
ol,             ul, 
li,             fieldset, 
form,           label, 
legend,         table, 
caption,        tbody, 
tfoot,          thead, 
tr,             th, td { 
margin : 0; 
padding : 0; 
border : 0; 
font-weight : inherit; 
font-style : inherit; 
font-size : 100%; 
font-family : inherit; 
vertical-align : baseline; }

/* Body ---------------------------------------------------- */

body {
width : 60%;

/* http://www.cameronmoll.com/archives/000892.html */
width : expression(document.body.clientWidth < 640? "640px" : document.body.clientWidth > 120? "120em" : "auto");
margin : 0 auto;
padding : 2em 0;
background :  #fff;
font : 88% Georgia, Times, serif;
line-height : 1.4;
color : #333; }

/* Headings ---------------------------------------------------- */

h1, h2, h3, h4, h5, h6 { 
font-weight : normal; }

h1 { 
margin-bottom : .5em;
font-size : 3em; 
line-height : 1; }

h2 { 
margin-bottom : .75em;
font-size : 2em; }

h3 {
margin-bottom : 1em;
font-size : 1.5em;
line-height : 1 ; }

h4 {
margin-bottom : 1.25em;
font-size : 1.2em;
line-height : 1.25; }

h5, h6 { 
margin-bottom : 1.5em;
font-weight : bold; 
font-size : 1em; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { 
margin : 0; }

/* Text elements -------------------------------------------------------------- */

p { 
margin : 0 0 1.5em; }

a {
color : #105cb6; 
text-decoration : underline; }

a:visited { 
color : #105cb6; }

a:focus, a:hover { 
color : #003; }

a img {
border : none; }

blockquote, q {
quotes : "" ""; }

blockquote { 
margin : 1.5em 1.5em 1.5em -1.5em;
padding-left : 1.5em;
border-left : 1px solid #666;
font : italic 1.2em "Times New Roman", Times, serif; }

blockquote:before, blockquote:after, q:before, q:after { 
content : ""; }

strong { 
font-weight : bold; }

em, dfn { 
font-style : italic; }

dfn { 
font-weight : bold; }

sup, sub { 
line-height : 0; }

abbr, acronym { 
border-bottom : 1px dotted #666; }

address {
margin : 0 0 1.5em;
font-style : italic; }

del { 
color : #666; }

pre, code, tt {
margin : 1.5em 1.5em 1.5em -1.5em;
padding-left : 1.5em;
border-left : 1px dotted #666;
font : 1em 'andale mono', 'lucida console', monospace;
line-height : 1.5; }

pre { 
white-space : pre; }

code { 
display : block; }


/* Lists -------------------------------------------------------------- */

li ul, li ol { 
list-style-type : circle;
margin : 0 1.5em .75em 1.5em; }

ul, ol {
margin : 0 1.5em 1.5em 0; }

ul { 
list-style-type : disc; }

ol {
list-style-type : decimal; }

dl {
margin-bottom: 1.5em; 
padding-top: 1.5em; 
border-top : 1px solid #ccc; }

dl dt {
margin-bottom : .75em;
font-size : 1.2em;
line-height : 1.25; }

dd {
margin-bottom: 1.5em; 
padding-bottom: 1.5em; 
border-bottom : 1px solid #ccc; }

/* Tables -------------------------------------------------------------- */

table {
border-collapse : separate; 
border-spacing : 0;
margin-bottom : 1.4em;
width : 100%; }

table, td, th { 
vertical-align : top; }

th, thead th {
font-weight : bold; }

th, td, caption {
padding : 4px 10px 4px 5px; 
text-align : left; 
font-weight : normal; }

th, td {
border-bottom : 1px solid #ccc; }

tfoot { 
font-size : .9em; }

caption {
margin-bottom : 1em;
font-size : 1.5em;
line-height : 1 ; }

/* Forms -------------------------------------------------------------- */

label { 
font-weight : bold; }

fieldset { 
margin : 0 0 1.5em 0; 
padding : 1.4em 1.4em 0 1.4em; 
border : 1px solid #ccc; }

legend {  
font-size : 1.2em; 
font-weight : bold; }

textarea { 
width : 390px; 
height : 250px; 
padding : 5px; }

Eric meyer CSS reset

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,
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-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

1. If I'm making a site which needs to be compatible on IE 6 also then should i use Universal IE6 CSS along with eric meyer css reset or no need or benefit to use Universal IE6 CSS ?
2. or i should use both but Universal Internet Explorer 6 CSS only for IE6 , I mean in conditional comment.
3. or I should use both as a normal css without conditional comment for IE6?

If i should use both then what should be order to place. Which should come first in source?

Answer 1

I’m not familiar with Andy Clarke’s stylesheet, but it looks like it’s just doing the same reset work as Eric Meyer’s, then putting in some particular default styles. Nothing particularly helpful for IE 6 (though not unhelpful either).

I don’t think either of them are especially helpful with IE 6 compatibility. CSS resets are there to give you an almost completely clean slate, by getting rid of most default browser styles.

I find this helpful, because it forces you to think about all your styles, and can save a lot of resetting throughout your stylesheet if, for example, you often use lists for things that shouldn’t have the default browser list styles. But it doesn’t make much difference to working around Internet Explorer’s bugs and missing features.

Answer 2

Personally I go with CSS Reset all the way. In terms of an analogy I see it the same as an artist creating his canvas frame and applying the blank canvas.

I've never been a fan of the Universal IE6 CSS as it seems a bit counter-intuitive to me to reset every element and then apply a whole load of other defaults to the page.

My approach has always been: reset every element (using CSS Reset) and start from scratch, later you may need IE6 specific CSS but from my own experience its normally no more than 4 or 5 elements which can be tagged on using an IE6 conditional CSS file.

Answer 3

The Universal Internet Explorer 6 CSS is not a reset CSS. It is not intended to be used with all browsers.

It is a stylesheet that gives you a text only version of a website. Its purpose is to give a usable website in IE6 without having to spend time to make it look the same as in the other browsers.

See this website: Universal Internet Explorer 6 CSS home page

and this is what that site looks like in IE6