CSS : Save Design from Browser

My friend are really annoyed on Browsers.One of close friend just join in a software company.I can't tell the name of his software firm otherwise my boss may think I am marketing of my friend's software firm.

It was his first assignment and as we do at first assignment,he really worked hard and make a web design with HTML/CSS.It quite perfect and working nice in his browser.Next morning he submitted his work to his and at that moment he was really happy.But after some moment his boss came and shows his design in IE(Internet Explorer) the most desirable browser (Surely making marketing IE.wish Mr.Gates will see my post and give me a job in Microsoft ).After seeing his work,he shocked.what is this?..Is that my work?He thought his boss missed some files and because of that it looks like this kind of stupid work.He tries to solve those problem for a long time but it looks nice in "Mozilla",quite nice "Chorme" but in "IE",can't say how it look like.its look horrible.After working a long time his work,the result is, he got couple of his hairs in his desk and few nice from his boss.

We all friends meet a tea stall after our office.And after listen his first day experience, I thought its enough.Now time has come to save my code from browsers.Time has come to reset your CSS.

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

Here is the CSS reset code.

Dont worry you can set this CSS code later as you want.

/* Eric A. Meyer work it for reset CSS */
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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Just set this code on the top of your CSS file and give a kick.. to browser problems.

Important  Topics :

 Lets make a simple if/else code.

if(you are like me)

      {

            Just copy it and get result;

      }

else           //if such kind of student who likes to make operation on my code 

    {

        Read bellow topics;

        //If you find some thing wrong in bellow,please dont ask me.because I am not like you

     }

1.Make Base Font Size

body { font-size: 62.5%; }

Dont think I make mistake, not to give value 100% because By setting the body font-size to 62.5%, that will set your font size to 10 pixels. That way, 1em is equal to 10 pixels.Although I typically then set my container font-size to 1.2em, which in turn sets the font-size to 12 pixels. But still, then you know that 1em is equal to 12 pixels.

Remember client are really horrible on pixel.I dont know why but they do.

2.Set Margin

There are some default margin basis on  browser.Because of that need to reset margin first.

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td 

{ margin: 0; padding: 0; } 

IE has default 2px margin-left of it main div.So,when you set margin-left:10px that mean its assign 12px but its work on Mozilla 10px.By resetting margin:0px that means you set your margin zero pixel for each browser and it overlap all before values.

Then, you can set the margins that you want accordingly.

3. Clear Float

Floating is probably one of the most important things to understand with CSS, but knowing how to clear floats is necessary too. All you need to remember is: Set a Float to Clear a Float.

4. Faux Columns

It is very common in layouts to have 2 columns next to each other, with one column having a background color, and the other column just being white. Since the columns will almost never have the same amount of content in them, the easiest way to fake this, is to have a 1px tall background image being repeated vertically in the containing element of the 2 columns.

There are lots of example for reset CSS.When you are admire in big project remember about reset CSS.Otherwise it will be painful for you after finishing your design. 

Remember me,when you are with your BOSS in a happy moment.

Wish my friend will smile always.

Best of luck