Question

I’m having a problem with my form that looks okay in Firefox but it goes lower than I want it to on Chrome and IE. Also footers go higher in IE when there perfect in Chrome and FF.

I just want to know if there is any way I can make the CSS specific to each browser so if I opened my page in FF, IE or Chrome it would use the CSS specific to it.

Thanks

Update:

I have found this code to make a separate style sheet for IE:

<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Is there one I can make for all the other browsers?

Answer 1

In IE you can add a specific stylesheet using conditional comments:
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

For Mozilla and Chrome you could use vendor specific tags.
In Chrome you would use something like this (As Chrome is webkit based, you add -webkit before tags):

#foo {
  -webkit-border-radius:5px;
  -webkit-box-shadow: 5px 5px 5px #000;
}

And in Mozilla you would use (add -moz before tags):

#foo {
  -moz-border-radius:5px;
  -moz-box-shadow: 5px 5px 5px #000;
}

You have to remember you cannot do this in all tags.

List for Mozilla:
https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

List for Chrome:
http://qooxdoo.org/documentation/general/webkit_css_styles