Specific CSS line (NOT file) depending by web page visitor's browser

I have a HTML styled by a CSS file.
The problem is that I have several browser compatibility issues. To solve all my problems I need to add new CSS rules (margin or height) to fix my problem. I will need to change 5-6 divs, depending by the Web Page visitor's browser.

For example let's take a specific <div> who is named: #main_menu

#main_menu{
widht: 800px;
height: 35px;
line-height: 35px;
}

Now, I need to add new CSS specific rules depending by Web Browser:

For Mozilla Firefox I need to set: height: 34; instead of height: 35;
For Opera I need to set: top-margin: -3px;
For Internet Explorer I need to set: top-margin: -2px;

I've tried to do something like this, but unfortunately I don't know how it works:

#main_menu{
widht: 800px;
height: 35px;
line-height: 35px;

-moz-height: 34; /* for Firefox */
-o-top-margin: -3px; /* for Opera */
-ms-top-margin: -2px; /* for IE */
}

P.S.: The CSS code works OK in Chrome and Safari.

Thank you for time!

Solution

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#selector{ /* Chrome or Safari */
    background: green;
}

#selector{ /* Internet Explorer 8 or bigger vers. */
    background: pink\9;
}

@-moz-document url-prefix(){ /* Firefox */
#selector{
background: lime;
}
}

doesnotexist:-o-prefocus, #selector{ /* Opera */
  background: red;
}
</style>
</head>

<body>
<div id="selector" style="padding:100px;">ss</div>
</body>
</html>