Two scrollbars, Difficulties in removing them Options

[Dent]

Hi, I'm a lurker with a mild interest in making xanga layouts. I'm feeling rather frustrated right now, trying to make my first 'real' skin. I have two or three scrollbars showing up on my site that I don't want, and I can't seem to figure out what I'm doing wrong. If anyone could let me know what's wrong please let me know!

My Xanga Page

This is what is in my custom header right now.

<!-- begin code provided by createblog.com --><br /><br /><map name="imgmap"><br /><area shape="rect" alt="" coords="852,469,903,498" href="http://www.xanga.com/logout.aspx"><br /><area shape="rect" alt="" coords="801,469,851,499" href="http://www.xanga.com/private/subs.aspx"><br /><area shape="rect" alt="" coords="701,469,801,502" href="http://www.xanga.com/guestbook.aspx?user=USERNAME"><br /><area shape="rect" alt="" coords="628,469,701,500" href="http://www.xanga.com/Private/SubscribeTo.aspx?user=USERNAME"><br /><area shape="rect" alt="" coords="573,469,628,502" href="http://www.xanga.com/claf"><br /><area shape="rect" alt="" coords="493,469,573,501" href="http://www.xanga.com/private"><br /><area shape="rect" alt="" coords="420,469,493,502" href="http://www.xanga.com/"><br /></map><br /><br /><center><IMG SRC="http://i5.photobucket.com/albums/y158/Engil_Deimen/aeris_g_3.jpg" border=0 width=930 height=550 USEMAP='#imgmap'> <br /><br /><div class="blogbody" style=" overflow: auto; width: 520; height: 265px; margin-top: -362px; margin-left: 480;"><br /><br /><script language=javascript><br />document.title=(' ||winter|||fresh|| - advented version ')<br /></script><br /><br /><style><br />body <br />{background-color: #ffffff;<br />scrollbar-arrow-color: #000000<br />scrollbar-track-color: #ffffff;<br />scrollbar-shadow-color: #ffffff;<br />scrollbar-face-color: #ffffff;<br />scrollbar-highlight-color: #ffffff;<br />scrollbar-darkshadow-color: #ffffff;<br />scrollbar-3dlight-color: #ffffff;}<br /><br />.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer {display: none;}<br />.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p {<br />/* edits main text */<br /> font-family: verdana;<br /> text-transform:none;<br /> font-size: 8pt;<br /> color: #000000;<br /> line-height:12px;<br /> text-align:justify;<br /> }<br /><br /><br />div.blogheader, .caption {<br />/* edits the dates */<br />  font-family:verdana;<br />  text-transform:uppercase;<br />  font-size:12px;<br />  line-height:10px;<br />  font-weight:bold;<br />  color:#000000;<br />  border: 0px solid #000000;<br />  text-align: center;<br />  }<br />input, select, textarea, .textfield, .button {<br />/* this edits the buttons, dropdowns, etc. */<br /> border: 0px solid #000000;<br /> font-family: arial;<br /> font-size: 8pt;<br /> color: #ffffff;<br /> background-color: #990002;<br /> letter-spacing:0px;<br /> }<br /><br />table.blogbody tr td { <br />/* this edits the left margin of blog */ <br />width:-300px; <br />padding-left: 0px;} <br /><br />table.blogbody {<br />/* this edits the other the place where the blog is */<br /> <br /> border: 0px solid #000000;<br /> width: 420px;<br /> padding-right: 0px<br /> font-family: verdana;<br /> font-size: 8pt;<br /> color: #000000;<br /> text-align: justify;<br /> }<br />table.navigation, table.main, table.footer {<br /> width:420<br /> }<br />.table.footer,table.navigation {display: none;<br />}<br />td.mainleft { display:none }<br />table.left { display:none }<br />table.footer { display:none }<br />.leftmoduletitlebar { display:none }<br />.leftmoduleborder { display:none }<br />table.navigation { display:none }<br /><br /><br />.blogbody td { width:0px; padding-left:0px; }<br /><br />a:link, .footernav.link, a.footernav:link, a.footernav:active {<br />/* edits all links */<br /> color: #ffffff;<br /> font-size: 8pt;<br /> line-height:10px;<br /> text-decoration: none;<br /> text-align:center;<br />}<br /><br />a:visited, a.footernav:visited,  {<br />/* edits the links that the user has visited */<br /> color: #ffffff; <br /> font-size: 8pt;<br /> line-height:10px;<br /> text-decoration: none;<br /> text-align:center;<br />}<br /><br />a:hover {<br /> color: #ffffff;<br /> height: 10px;<br /> font-size: 8pt;<br /> line-height:10px;<br /> text-decoration: none;<br /> text-align:center;<br />}<br /></style><br /><br /><style type="text/css"><br />table.navigation, table.footer { display:none; }<br /></style><br /><br /><!-- end code provided by createblog.com -->

Err, if the layout seems familiar, I was adapting this based on a Samurai Champloo layout I saw here. I'm not trying to take credit for anything, and I feel it's only fair to point out where the real credit is due.

Anyhow, when it first loads up in my IE browser, I see a horizontal scroll bar in my blog body, which goes away after a minute or so of scrolling in the body. There is a vertical scrollbar, which I don't mind having, but I'd like it to be within my designated blog body area. And finally I have a horizontal scrollbar on the bottom which I do not want.

Also, this is of minor concern, it doesn't seem to show up correctly in Firefox. I don't mind this part as much, however, as IE is my main browser.

If anyone can advise me what I'm doing wrong, I'd be very appreciative. Thank you in advance!!