Need help with my website - CSS

My website www.voobly.net works in Chrome and Firefox, im trying to make it work for Internet Explorer. The issue is in my CSS horizontal header links style sheet.

Q: Whats wrong with the Chrome version when I upload the IE version?
A: A square should follow your mouse over while hovering over the links, example on Chrome now.

Q: Whats wrong with the IE version when I upload the Chrome version?
A: Entire Style sheet screws up page!

Right now I have the chrome and FF one working.

If I have this code in my stylesheet.css file:

Code:

#header ul#nav li {
    float: right;
    margin: 0 5px 0 0;
}

It will work fine in Chrome and Firefox.

If the code is this:

Code:

#header ul#nav li {
    display: inline;
    margin: 0 5px 0 0;
}

It will work in IE, but not in Chrome/FF.

So I have two style sheets, once that makes FF/CHRM work, another that makes IE work, so I decided to try this:

Code:

&lt;!-- For all other browsers --&gt;

&lt;link REL="stylesheet" href="stylesheet.css" type="text/css"&gt;

<!�[if IE 7]>

&lt;link rel="stylesheet" type="text/css" href="ie_stylesheet.css" /&gt;

<![endif]�>

<!�[if IE 6]>

&lt;link rel="stylesheet" type="text/css" href="ie_stylesheet.css" /&gt;

<![endif]�>

<!�[if IE]>

&lt;link rel="stylesheet" type="text/css" href="ie_stylesheet.css" /&gt;

<![endif]�>

<!�[if IE 8]>

&lt;link rel="stylesheet" type="text/css" href="ie_stylesheet.css" /&gt;

<![endif]�>

Now, ive tried endless combinations of the if IE code, none of them work, through I do have the ie_stylesheet.css in the right place, so why isnt it working? Do you have a solution? Ive uploaded my files for you, please take a look and get back to me, Im in dire need of help! Thankyou.

My CURRENT style sheet: (Chrome/FF)