Need quick tip to get site to line up correctly in IE

HTML & CSS
1

Hello I have completely finished my site for Chrome and Firefox, which is never a problem. The problem is Internet Explorer! It seems its always IE that gives me trouble and its the most popular (even though its the worst!).

So if anybody isn’t to mad at me for bad mouthing IE then can you please help me get past this last hump to start promoting my website.

If you go to Bonkage.com you should see what I mean, the right navigation buttons after web design and the footer buttons are all to low, but I don’t want to mess with the the positioning because it will mess up Firefox and Chrome.

Thanks

Chris aka Bate145185

2

At one point I fixed a problem like this with adding this to my header. . .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<HTML>
  <HEAD>
      <link href="CSS2/homestyle.css" medio="screen" rel="stylesheet" type="text/css" />
        <TITLE>Bonkage.com</TITLE>
   
<!--[if (gt IE 6)&(lte IE 7)]>
<link href="/css/menu-ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if (gt IE 3)&(lte IE 6)]>
<div id="oldie">
<h1>Old Browser Detected</h1>
Your browser is to old to view this site properly. You can download a newer browser that is compatible with this site here:
<ul>
  <li><a href="http://www.mozilla.com/en-US/firefox/ie.html">FireFox</a></li>
  <li><a href="http://www.microsoft.com/windows/internet-explorer">Internet Explorer</a></li>
  <li><a href="http://www.apple.com/safari/">Safari</a></li>
</ul><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<![endif]-->
<!--
//This function is used to show or hide a nested div
function show(which){
    m=document.getElementById("mainDiv");
    trig=m.getElementsByTagName("div").item(which).style.display;
    if (trig=="block") trig="none";
    else if (trig=="" || trig=="none") trig="block";
    m.getElementsByTagName("div").item(which).style.display=trig;
}
//-->
  </HEAD>

Do I just need to Alter this a little? If not reply and ask for the rest of my code, Its to long to post it all.

3

You should really use a margin or padding to adjust that spacing instead of a million <br />.