How can I make my CSS code compatible with all browsers?

Question

 p {
        margin:0;padding:0;
    }
    p#error {
        color:#FF0000;
        text-align:center;
    }
    p#success {
        color:#3983C2;
        text-align:center;
    }
    div#nav {
        background-image:url('../img/nav.png');
        background-repeat:no-repeat;
        padding-top:5px;
        padding-bottom:5px;
    }
    div#nav, a {
        text-decoration:none;
    }
    body {
        margin:0 auto;
        width:600px;
    }
    div#login, div#register {
        background-image:url('../img/form.png');
        background-repeat:repeat-y;
        padding-top:5px;
        padding-bottom:5px;
    }
    div#login table, div#register table {
        margin:0 auto;
    }
    div#login table td, div#register table td {
        text-align:right;
    }
    div#login input#btn, div#register input#btn {
        background-image:url('../img/btn.png');
        border-style:none;
        width:70px;height:25px;
    }
    div#footer {
        background-image:url('../img/footer.png');
        height:30px;
    }

Here is my CSS code. I don't know how to make this CSS work in other browsers, currently I'm working in Chrome. I already searched the net and found many pages with related information, but these are even more difficult for me to understand. Need your suggestions or etc. Thank you very much!

First of all: Is there a problem in other browsers to begin with? If not: done. If so: figure out the individual problems and fix them individually. — deceze, Aug 23 '12 at 14:10

khollenbeck · Accepted Answer · 2012-08-23T15:13:35.677

8

Your CSS should work in all browsers as is. It may not display the same from browser to browser. Most developers use a reset to fix that issue.

CSS RESET

http://meyerweb.com/eric/tools/css/reset/

or

NORMALIZE

http://necolas.github.com/normalize.css/

edited Aug 23 '12 at 15:13

answered Aug 23 '12 at 14:10

khollenbeck

16,028
18
66
101

what should i use? for a beginner like me? – Augustine Frendz Aug 23 '12 at 14:14
Both are good, its mostly preference.. Check out this post for more info. http://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css – khollenbeck Aug 23 '12 at 15:06

score 3 · Answer 2 · answered Aug 23 '12 at 14:10

3

The problem is that each browser adds different default margins, padding, etc., to different items. This means that you get slightly, or greatly, different layouts in each.

I like to do a CSS rest like this:

*{margin:0; padding:0}

answered Aug 23 '12 at 14:10

phunder

1,607
3
17
33

that's all i need? Sorry i'm still in the process of learning :) – Augustine Frendz Aug 23 '12 at 14:15

score 2 · Answer 3 · edited May 23 '17 at 10:31

2

IE(worst enemy): http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Firefox: http://css-tricks.com/snippets/css/css-hacks-targeting-firefox/
Opera: How to make CSS visible only for Opera

edited May 23 '17 at 10:31

Community

1
1

answered Aug 23 '12 at 14:11

so i will create different css for each of the browsers? :( – Augustine Frendz Aug 23 '12 at 14:16
basically yes, but you can edit existing css by adding hacks ('hacks' in this link described..) – Aug 23 '12 at 14:19
2

Don't add hacks. Try to generalize your CSS so it works the same in all browsers. If you have to, use browser specific stylesheets for the few cases you cannot generalize. Don't use hacks. – deceze Aug 23 '12 at 14:21
Dont forget to add DOCTYPE for your page!! – Aug 23 '12 at 14:21
1

@AugustineFrendz, You shouldn't need to create different stylesheets for each browser. 99% of the time if you code smart and design properly you will only need one stylesheet for all browsers. – khollenbeck Aug 23 '12 at 15:35

How can I make my CSS code compatible with all browsers?

3 Answers3

Linked