Help with putting title text

Hey guys its been awhile since i been around since with my new job and all (truck driver) I started messing around with websites again but forgot all the tricks lol.

the issue im having is with wordpress side bar the widget title needs to be on top of the header portion but, it left a space. now if i try to do it a different way the background of the side bar overloads the header so u get the header portion correct but then it looks like the error in the middle block which i left uncorrected for visual reference.

Edit I changed it back to the same way the middle is right now maybe theres something that can be done in the CSS or the Basic HTML to fix my Issue

anyway heres the link to the toy site hope someone can help http://pitbullmean.gegahost.net

/* -------------------------------------
#sidebar
------------------------------------- */
#sidebarfooter
{ background: url(images/right_bottom.png) no-repeat;
height: 36px;
width: 338px;

}

#sidebar
{
float:right;
margin-right: 22px;
color: red;
width:338px;
}
.sidebar {
background: url(images/right_bg.png) repeat-y;
}

#sidebar h2
{
background: url(images/right_top.png) no-repeat;
padding:7px 10px 2px 7px;
display:block;
width:338px;
height:49px;
font-weight:normal;
color:#fff;

}

<div id="sidebar">
<div class="sidebar"><ul>
<?php /* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

<li id="search" class="widget widget_search">
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</li>

<!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
<li><h2>Author</h2>
<p>A little something about you, the author. Nothing lengthy, just an overview.</p>
</li>
-->

<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>

<li><h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>

<?php wp_list_categories('show_count=0&title_li=<h2>Categories</h2>'); ?>

<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
<?php wp_list_bookmarks(); ?>

<?php } ?>

<?php endif; ?>
</ul></div>
<div id="sidebarfooter"></div>
</div>

Anyone willing to help?

the issue im having is with wordpress side bar the widget title needs to be on top of the header portion but, it left a space.
Could you make a rough sketch of your desired output?

searched your code for several times, looks like no problem. sorry...

The desired out look is just a block with the corners chopped off. But some reason the top of the block is throwing me the horns lol

The background image on #sidebar is showing because the background on #sidebar h2 is set to transparent (giving you the 'horns')- set it to black and you're almost there.
However, then the background image isn't long enough on either side - so you could just make it longer, or adjust the height and padding:

#sidebar h2 {
background: url("images/right_top.png") no-repeat scroll 0 0 black;
color: #FFFFFF;
display: block;
font-weight: normal;
/*height: 49px*;/
padding: 7px 10px 4px 7px;
width: 338px;
}

hey SB,

The background isnt black i just accidentally removed the background image from the FTP. If someone can take a look again that would be great

Now i started to fix the left block but then i had a the mysterious gap on the image so i added a float to it to fix the issue which it did but then the horns are on the left block. But If i remove the float i get no horns but a gap at the bottom of the top of the block bg abduraooft HELP!! lol. I always got awesome help from you. if u need access to my wordpress site just let me know.

EDIT, I Got rid of the horns Now I just need to find out a way to get rid of the spaces between the header and footer of the block
http://pitbullmean.gegahost.net/