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

The most common issue is the 'box model' that is likely what is causing your issue.
Search for 'box model' or 'box model ie' . This would be a good place to start with the differences.

IE6 is the biggest standards offender, IE7 is better and IE8 (which showed up today in my windows update) is even better.

Sorry I don't have any one great link for you.

One of the best resources for IE bug-fixing - www.positioniseverything.net

The most common issue is the 'box model'

Not necessarily. If the OP has an old, UNpatched version of IE6, then yes, but if the OP has a fully patched IE6, then the box model problem was fixed with one of those updates almost 2 years ago.

Older versions of IE you still have to worry about it's busted box model, but I no longer bother to with bending over backwards for anything older than IE6, the usage percentage is just too low.

I still can't seem to figure this out and positioniseverything.net is very confusing to me.

Maybe someone can notice something wrong in 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>

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;
}

Couple of things:
IE does NOT support display:table
IE does NOT support display:inline-block

If you just want a horizontal menu, just use display:inline -IE DOES understand that one.

Thank you! Inline did the trick.

For that same horizontal menu, IE won't display the border-right 1px, that I have, but it will display the border-bottom 1px. Does IE not support "border-right?

Thanks

Of course it does, the problem lies elsewhere in the coding for the menu.

Man, IE6 is such a pain. Someone should probably make a whole wiki on how to make websites "compatible" to IE or even better find a way to completely "kill" IE6 alltogether

Someone should probably make a whole wiki on how to make websites "compatible" to IE

If you bothered to check the LINK I posted above, you'd know that it's a very inclusive source for combatting IE6's many bugs.

There's no way to kill IE6 completely - we're likely stuck with it for quite some time yet.