Having a huge CSS issue!

Please help out ;)

[AKC_Pico]

My website <snip> 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:

////////////////////////////////////////////////////////////////

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

////////////////////////////////////////////////////////////////

It will work fine in Chrome and Firefox.

If the code is this:

////////////////////////////////////////////////////////////////

#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:

////////////////////////////////////////////////////////////////

<!-- For all other browsers -->

<link REL="stylesheet" href="stylesheet.css" type="text/css">

<!–[if IE 7]>

<link rel="stylesheet" type="text/css" href="ie_stylesheet.css" />

<![endif]–>

<!–[if IE 6]>

<link rel="stylesheet" type="text/css" href="ie_stylesheet.css" />

<![endif]–>

<!–[if IE]>

<link rel="stylesheet" type="text/css" href="ie_stylesheet.css" />

<![endif]–>

<!–[if IE 8]>

<link rel="stylesheet" type="text/css" href="ie_stylesheet.css" />

<![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? <snip> Im in dire need of help! Thankyou.

<snip>

Thankyou agian!

[edited by: swa66 at 10:48 pm (utc) on Sep. 8, 2009]
[edit reason] Keep discussion in the forum and NO links. See ToS and Forum Charter [/edit]

[swa66]

This code works:

<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE 6]>
 <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
<!--[if IE 7]>
 <link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

or

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

The thing is you have to undo what you did in the standard stylesheet in the IE stylesheet(s).

So if you want something to be floated in all browsers, but have display:inline in IE (I've no idea why you need that, but, for argument's sake): you need to not just set the "display:inline" (the margins will remain from the standard stylesheet, no need to set it again), and undo the floating with "float: none"