Making a skin, ran into a little trouble, Some things just aren't fitting Options

[CosmicCastaway]

Ok, so I'm making my first skin, and with the help of you guys, I've gotten far, but I got one itsy-bitsy obstacle... the banner and blog aren't flowing uniform.

CODE

<!-- begin code provided by createblog.com -->
<style type="text/css">

/* width of the comment page */
{width:245px;}
.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer
{display: none;}
</style>

<style type="text/css">
/*Calamity*/
/*by Cosmic*/
body {
background-image:url(http://img.photobucket.com/albums/v394/CC7o9/Website/calamitybg.jpg);
background-repeat: no;
background-color: #38362A;
scrollbar-face-color: #5D6556;
scrollbar-shadow-color: #4C4C44;
scrollbar-highlight-color: #4C4C44;
scrollbar-3dlight-color: #4C4C44;
scrollbar-darkshadow-color: #4C4C44;
scrollbar-track-color: #4C4C44;
scrollbar-arrow-color: #4C4C44;
}

#rblEprops, #pnlEnabled table, #pnlEprops table {
width: auto !important;
}

table.blogbody {
background-image:url(http://img.photobucket.com/albums/v394/CC7o9/Website/calamitymain.jpg);
width:481px;
font-family: verdana;
font-weight: none;
font-size: 8pt;
color: #000000;
text-align: left;
padding: 0px;
margin-top: 0px;
}

.caption, .blogheader {
background-image:url(http://img.photobucket.com/albums/v394/CC7o9/Website/calamitymain.jpg);
width: 481px;
padding: 0px;
font-family: verdana;
font-size: 10pt;
text-align: center;
color: #000000;
background-color: #38362A;
text-transform: lowercaps;
margin-top: 0px;
}

div.smalltext{
width: WIDTHpx;
padding: 0px;
text-align: left;
}

P, B, I, TD, TH
{font-family: verdana; color: #000000; font-size: 8pt; }
A:link, A:visited, A:active
{color:#COLOR CODE OF A LINK; text-decoration:none; font-size:8pt;}
a:hover
{text-decoration: underline; color:#663366; font-size: 8pt; );}
b, strong, i, u, {
/* edit colors when bold italic underline */
font-family: arial;
font-size: 8pt;
color: #000000;
font-weight: bold;
text-transform: lowercaps;
</style>

<DIV align="center" valign="middle" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FILTER: alpha(opacity=100); BORDER-LEFT: black 1px solid; WIDTH: 481;
BORDER-BOTTOM: black 1px solid; solid:;
BACKGROUND-COLOR: #38362A">
</style>

<table width=729 cellpadding=0 cellspacing=0 background="http://img.photobucket.com/albums/v394/CC7o9/Website/calamitymain.jpg" border=0>

<table class="container" align="center" cellspacing="0" cellpadding="0" width="481">
<tr>
<td class="banner" align="right"> <img src="http://img.photobucket.com/albums/v394/CC7o9/Website/calamitybanner.jpg" width=481 height=377 border=0 alt="Calamity" usemap="#Map">
  <map name="Map">
    <area shape="rect" alt="Log Out" coords="436,316,469,328" href="http://www.xanga.com/logout.aspx">
<area shape="rect" alt="Sign In" coords="391,317,427,328" href="http://www.xanga.com/signin.aspx">
    <area shape="rect" alt="Suscribe to me" coords="339,318,384,327" href="http://www.xanga.com/Private/SubscribeTo.aspx?user=CosmicCastaway">
    <area shape="rect" alt="View Profile" coords="302,317,332,329" href="http://www.xanga.com/profile.aspx?user=CosmicCastaway">
    <area shape="rect" alt="Customize Look and Feel" coords="265,317,295,328" href="http://www.xanga.com/CLAF/default.asp">
    <area shape="rect" alt="Your Xanga" coords="224,316,257,329" href="http://www.xanga.com/private/home.aspx">

</map>
</td></tr>


<!-- end code provided by createblog.com -->
<!-- end code provided by createblog.com -->

To get it too all look uniform, I had to put a background colour behind my blog background image, but the widths are matching up. How do I fix that?

Here's My Xanga.

[shortvi3tlaydee]

u have to put the image mapping FIRST THING of your code

[CosmicCastaway]

u have to put the image mapping FIRST THING of your code

Yeah, I did that, but it made the background colour I was trying to put in disappear...

CODE

<!-- begin code provided by createblog.com -->
<table width=729 cellpadding=0 cellspacing=0 background="http://img.photobucket.com/albums/v394/CC7o9/Website/calamitymain.jpg" border=0>

<table class="container" align="center" cellspacing="0" cellpadding="0" width="481">
<tr>
<td class="banner" align="right"> <img src="http://img.photobucket.com/albums/v394/CC7o9/Website/calamitybanner.jpg" width=481 height=377 border=0 alt="Calamity" usemap="#Map">
  <map name="Map">
    <area shape="rect" alt="Log Out" coords="436,316,469,328" href="http://www.xanga.com/logout.aspx">
<area shape="rect" alt="Sign In" coords="391,317,427,328" href="http://www.xanga.com/signin.aspx">
    <area shape="rect" alt="Suscribe to me" coords="339,318,384,327" href="http://www.xanga.com/Private/SubscribeTo.aspx?user=CosmicCastaway">
    <area shape="rect" alt="View Profile" coords="302,317,332,329" href="http://www.xanga.com/profile.aspx?user=CosmicCastaway">
    <area shape="rect" alt="Customize Look and Feel" coords="265,317,295,328" href="http://www.xanga.com/CLAF/default.asp">
    <area shape="rect" alt="Your Xanga" coords="224,316,257,329" href="http://www.xanga.com/private/home.aspx">

</map>
</td></tr>

<style type="text/css">

/* width of the comment page */
{width:245px;}
.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer
{display: none;}
</style>

<style type="text/css">
/*Calamity*/
/*by Cosmic*/
body {
background-image:url(http://img.photobucket.com/albums/v394/CC7o9/Website/calamitybg.jpg);
background-repeat: no;
background-color: #38362A;
scrollbar-face-color: #5D6556;
scrollbar-shadow-color: #4C4C44;
scrollbar-highlight-color: #4C4C44;
scrollbar-3dlight-color: #4C4C44;
scrollbar-darkshadow-color: #4C4C44;
scrollbar-track-color: #4C4C44;
scrollbar-arrow-color: #4C4C44;
}

#rblEprops, #pnlEnabled table, #pnlEprops table {
width: auto !important;
}

table.blogbody {
background-image:url(http://img.photobucket.com/albums/v394/CC7o9/Website/calamitymain.jpg);
width:481px;
font-family: verdana;
font-weight: none;
font-size: 8pt;
color: #000000;
text-align: left;
padding: 0px;
margin-top: 0px;
}

.caption, .blogheader {
background-image:url(http://img.photobucket.com/albums/v394/CC7o9/Website/calamitymain.jpg);
width: 481px;
padding: 0px;
font-family: verdana;
font-size: 10pt;
text-align: center;
color: #000000;
background-color: #38362A;
text-transform: lowercaps;
margin-top: 0px;
}

div.smalltext{
width: WIDTHpx;
padding: 0px;
text-align: left;
}

P, B, I, TD, TH
{font-family: verdana; color: #000000; font-size: 8pt; }
A:link, A:visited, A:active
{color:#COLOR CODE OF A LINK; text-decoration:none; font-size:8pt;}
a:hover
{text-decoration: underline; color:#663366; font-size: 8pt; );}
b, strong, i, u, {
/* edit colors when bold italic underline */
font-family: arial;
font-size: 8pt;
color: #000000;
font-weight: bold;
text-transform: lowercaps;
</style>

<DIV align="center" valign="middle" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FILTER: alpha(opacity=100); BORDER-LEFT: black 1px solid; WIDTH: 481;
BORDER-BOTTOM: black 1px solid; solid:;
BACKGROUND-COLOR: #38362A">
</style>




<!-- end code provided by createblog.com -->
<!-- end code provided by createblog.com -->

[shortvi3tlaydee]

the color isnt showing up becuz i think u put a url in the bg image part so if u want just a bg color delete your url

[CosmicCastaway]

But I want the background image. It's just that by itself, you get this disconnected look between the banner and in between posts.