Scrolling menu problem and extra white

Hello,
I’m having a problem with my menu that I created with Javascript. I wasn’t sure whether this should be on the javascript forum or css, but i think it’s a css problem.

Anyway, if you open up the website ([url]www.jamesscarola.com/navs[/url]) and shrink the browser so that the site scrolls (any browser will work), you will notice that the menu follows the browser when you scroll and doesn’t stay within the table.

I apologize for the mess of code with all of the tables and extra code, but that’s the fastest way i know to make a website. I’m learning other ways slowly but i need this site up and running by friday. I’m going to clean it up after the site is functional. I think it’s a “position:” problem but everything I use still doesn’t work.

Here is some of the code:

[code=html]
<table width=”950″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td>
<table width=”900″ border=”0″ align=”right” cellpadding=”10″ cellspacing=”0″>
<!–Navigation–>
<tr>
<td bgcolor=”#F1F1E2″>
<script type=”text/javascript” src=”menub.js”></script><noscript><div id=”mB”><a class=”mO” href=”#” >Site Map</a></div></noscript>
</td>
</tr>
<!–End Navigation–>
[/code]

[CSS]
#mB {
font:bold 12px arial,Helvetica,sans-serif;
text-align:left;
margin:0px;
position:relative;
top:0px;
left:0px;
width:100%;
padding:0;
overflow:hidden;
border:solid 1px #663300;
background-color:#663300;
z-index:1000;
}

.mH {
color:#cccccc;
text-decoration:none;
white-space:nowrap;
cursor:pointer;
padding:5px;
margin:0px;
padding-right:40px;
position:relative;
border-right:1px solid #ffffff;
}

a.mL {
display:block;
padding:1px 4px;
border-top:1px solid #663300;
text-decoration:none
}

a.mL:link {
color:#cc9966;
}

a.mL:visited {
color:#996633;
}

a.mL:hover {
color:#ffffff;
background-color:#663300;
}

a.mL:active {
color:#ffffff;
background-color:#cc9966;
}

a.mO {
display:block;
padding:1px 4px;
border-top:1px solid #663300;
text-decoration:none
}

a.mO:link {
color:#cccccc;
}

a.mO:visited {
color:#cccccc;
}

a.mO:hover {
color:#ffffff;
}

a.mO:active {
color:#ffffff;
}

.mD {
color:#cc9966;
font:10px arial, Helvetica, sans-serif;
background-color:#ffffff;
visibility:hidden;
margin:0;
padding:0;
position:absolute;
z-index:1000;
top:60px;
left:0;
width:125px;
border-style:solid;
border-width:0 1px 1px;
border-color:#663300;
}
[/CSS]

If you need the javascript, let me know.

Also, viewing the website in firefox and internet explorer is slightly different, as there is extra vertical whitespace above the photo in firefox. There’s probably a margin or padding hack that I don’t know yet, so any suggestions on that would be great! Thanks! 🙂

Also in #CSS _↴