views:

363

answers:

3

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?

A: 

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.

Paul D. Waite
I know CSS reset are not solution for IE bug but it's helpul to reset styles so use of reset fix some inconsistencies in all browser including IE. then for IE we wil lhave to make some more changes in CSS
metal-gear-solid
The other thought is that if you are going to have to set all your styles to value anyway, such resets are unneeded since you are resetting them all to "zero" then resetting them again to the value you want. Just set them to what you want in the first place and ignore any initial resetting.
Rob
@Paul D. Waite ,@Rob - What is the purpose and benefit of Universal IE6 CSS?
metal-gear-solid
@Rob you're assuming that its easy to remember what elements you're using on the specific website you're working on, and that you can remember what each browsers defaults are for said elements so you can overwrite them. That's a heck of a lot to think about for a medium/large website
Alex
@Alex - If you are setting all the elements to some value then you don't have to remember what the default is.@jitendra - I don't know anything about it but IE6 was the worst of the worst browsers and so far off the mark it couldn't hit the standard broad side of a W3C document so it's probably an attempt to to pull it into the same planetary orbit as modern browsers.
Rob
@Rob — yeah, I think Eric intended the reset to be a starting point. You can substitute the “zero” values for values you actually want. The only problem with doing that is that you have to break up the big lists of selectors, so I find it more readable to leave the reset as-is, then set the values I actually want separately.
Paul D. Waite
+1  A: 

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.

Alex
+1  A: 

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

Emily
oh thanks for clarification.
metal-gear-solid