CSS left "sidebar" column displays differently?

[WebLizzard]

I am about to give up, so any help would be greatly appreciated. I designed a website for a band. (http://www.muttilewis.com) I am new to CSS, so I did it to the best of my ability. I am having a major problem with the left Menu Sidebar that contains the page links. (Biography, Tour, DVDs, Music, Etc.) For some reason, this olive color Nav. Bar looks fine on my internet explorer, safari, and firefox… but as soon as I try to open the page from an older internet explorer browser, the Navbars width extends, so it is way too far over to the right of the page. It almost gets stretched out width-wise. This only happens on certain pages as well. For example, the index.html main page has the problem, as well as the DVDs, Music, Promo, Experience, Talk To Me, Contact and Tour 2004 pages… however, the Hurricane Page seems to be OK along with the rest of the links I haven’t mentioned. Is this possibly something in my coding on these pages?
I have declared the width in my stylesheet. I am including the entire code in case it may be another factor than the "nav" declaration.

Code:

body {
background-color: #ffffff;
text-align:center;
margin-top:30px;
}
.rightm {
border-right:1px solid #000000;
padding-left:2px;
vertical-align:top;
border-bottom:1px solid #000000;
}

.leftm {
vertical-align:top;
border-right:1px solid #000000;
border-left:1px solid #000000;
border-bottom:1px solid #000000;
}
td {
font-family:Tahoma;
}
.lefth {
height:19px;
width:213px;
font-family:Tahoma;
font-size:14px;
color:#ffffff;
border-bottom:1px solid #000000
}
.link {
font-family:Tahoma;
font-size:11px;
}
#column1 {float: left; width: 280px; padding: 10px; }
#column2 {float: right; width: 300px; padding: 20px; }
#column3 {float: left; width: 330px; padding: 10px; }
#column4 {float: left; width: 200px; padding: 10px; }
#column5 {float: left; width: 250px; padding: 10px; }
#column6 {float: left; width: 290px; padding: 10px; }

.nav {
width:800px;
height:27px;
background-color: #666633;
text-align:center;
font-size:13px;
font-family:Tahoma;
}
a {
color:#0000FF;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
img {
border:0;
}

Does anyone have any idea why this would happen? And why would it happen only on certain pages? Any advice on how to fix this? Thanks so much.
~Liz

[Author]

Posts