How to find fixes for I.E.?

How do I go about finding a fix for my CSS code for I.E.?

I've created a horizontal Navbar and it looks perfect in Firefox, but in IE, the last item on the right is on another line, below the other items.

I know it's a common thing to put in special code for IE, I've just never had to do it before because I always just used very basic html, until now.

I'd really appreciate it if someone could point me in the right direction.

Thanks

 

If you r in trouble with IE6 this is really easy.
Just take your css file and use !important. Really simple

width: 500px !important; /* It will put width to 500px in every brother */
width: 600px; /* with that second command it will put width to 600px just in IE6 but not in the other browser */

The !important works with every CSS command.

You can also use and other css file (style_ie.css for example)
Put this html code in your index
[if IE]> <link rel="stylesheet" type="style_ie.css" /> <![endif]-->

But put it after the line
<link rel="stylesheet" type="style.css" />

And every things you will write in style_ie.css will be apply to IE but not in Firefox, Chrome, Safari, Opera or other browser.

Happy 2 help you

EDIT: Sorry for my bad english if you don't understand smtg just ask.

 

positioniseverything.net

 

nice website i didn't know

 

I still can't seem to figure this out. The problem is with IE 7 and IE 8. I haven't been able to test it with IE 6 yet.

 

Without a link, or the complete markup, we can only guess.

 

Oops, good point, below is my code:

Html

<ul class="menu">
            <li><a title="Buy Isagenix" href="http://xxxxx.isagenix.com/us/en/nineday.dhtml">9 Day Program</a></li>
            <li><a title="Buy Isagenix" href="http://xxxxx.isagenix.com/us/en/thirtyday.dhtml">30 Day Program</a></li>
            <li><a title="Enroll In Isagenix" href="http://xxxxx.isagenix.com/us/en/signup.dhtml">Enroll To SAVE!</a></li>
            <li><a title="Isagenix Testimonials" href="http://xxxxx.isagenix.com/us/en/success_main.dhtml">Testimonials</a></li>
            <li><a title="Isagenix Videos" href="http://xxxxx.isagenix.com/us/en/isavideos.dhtml">Videos</a></li>
            <li id="menu-right">QUESTIONS?&nbsp;&nbsp;info@xxxxx.com</li>
        </ul>

Code (markup):

CSS

body {
    color: black;
    display: block;
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: 635px;
    line-height: normal;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    text-align: center;
}
 
.header {
    display: block;
    height: 70px;
    width: 778px;
    margin-top: 0px;
    margin-bottom: 5px;
}

.PageWrapper {
    display: block;
    margin-bottom: 0px;
    margin-left: 251px;
    margin-right: 251px;
    margin-top: 0px;
    text-align: left;
    width: 778px;
}

#tags {
    color: #676666;
    display: block;
    font-size: 9px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    width: 778px;
    text-align: right;
    right: 80px;
    position: relative;
}


h1, h2, h3, h4 {font-family:arial, verdana, sans-serif; color:#000; font-size: 9px;}

.menu {
  display:table;          
  padding:0;
  margin:0 auto;
  font-family: Century Gothic, arial, helvetica, sans-serif;
  font-weight: bold;
  white-space:nowrap;
  list-style-type:none;
  width: 778px;
  height: 42px;
  text-align: center;
  padding-top: 5px;
  font-size: 12px;
}
  
* html .menu {
  display:inline-block;
  width:1px;
  padding:0 2px;
}  
  
.menu li {
  display:table-cell;
 }
  
* html .menu li {
  display:inline;
}
  
.menu a {
  display:block;
  padding:0.5em 1em;
  background:#ffffff;
  color:#676666;
  text-decoration:none;
  border-bottom:1px solid #E1E1E1;
  border-right: 1px solid #E1E1E1;
}
  
* html .menu a {
  display:inline-block;
  margin:0 -2px;
}
  
.menu a:hover {
  color:#ffffff;
  background:#5D9732;
}
  
#menu-right {
    display:block;
    padding:0.5em 1em;
    background:#ffffff;
    color:#676666;
    text-decoration:none;
    border-bottom:1px solid #E1E1E1;
}

Code (markup):

 

For IE 6 Modifications

For IE 7 Modifications

and just add those 2 css files and start placing the fixing attributes

More Articles
maratz.com/blog/archives/2005/06/16/essentials-of-css-hacking-for-internet-explorer/
24ways.org/2005/avoiding-css-hacks-for-internet-explorer
virtuelvis.com/archives/2004/02/css-ie-only

sorry cause u gonna have to copy and paste but I'm not allowed to post a live links

 

Great, thanks for all of the help everyone. I should be able to figure it out now. I hope.