Simple banner fix needed for a skin

[X-Vert]

Whats up guys,

Really hope someone can help me here as I'm desperate.

Basically I replaced the stock banner with my banner, and I'm having problems spacing out the header from the banner. The navbar seems to be overlapping the banner, and I cannot figure out how to fix it.

This is the banner: http://g35nyc.com/forums/images/circ...header_bkg.jpg

its 989px ? 214px

Here is what it looks like:


And heres the code from the Additional CSS Definitions:

img {
border: 0px;
}
.fleft {
float: left;
}
.fright {
float: right;
}
div#top {
background: url({IF}/misc/top_bkg.gif) repeat-x;
}
div#header {
width: 930px;
height: 120px;
margin: 0px auto 1px auto;
background: url({IF}/misc/header_bkg.jpg) no-repeat;
position: relative;
}
a#home {
display: block;
width: 200px;
height: 214px;
}
table#thenav {
width: 930px;
margin: 10px auto;
height: 41px;
}
table#thenav td {
padding-top: 10px;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
}
table#thenav td a:link, table#thenav td a:hover, table#thenav td a:visited {
color: #FFFFFF;
text-decoration: none;
}
div#loginbox {
background: url({IF}/misc/login_bkg.gif) repeat-x;
height: 41px;
position: absolute;
left: 200px;
top: 85px;
color: #FFFFFF;
font-size: 10px;
font-weight: bold;
}
div#loginbox .time {
color: #FFFFFF;
}
div#loginbox a:link, div#loginbox a:hover, div#loginbox a:visited {
color: #FFFFFF;
}
span#slogan {
position: absolute;
top: 50px;
left: 350px;
color: #9a9a9a;
font-size: 14px;
font-style: italic;
}
input#navbar_username, input#navbar_password {
font-size: 10px;
padding: 7px;
width: 150px;
border: 0px;
margin: 0px 5px;
}
div#bottom {
background: url({IF}/gradients/gradient_bottom.gif) repeat-x;
}
div#footer {
height: 95px;
width: 930px;
margin: 0px auto;
color: #FFFFFF;
}
div#footer a:link, div#footer a:hover, div#footer a:visited {
color: #FFFFFF;
}
div#footer span {
display: block;
padding-top: 20px;
}
.darkgr {
color: #4f4f4f;
}
div.catbar {
background: url({IF}/misc/cat_bar.gif) bottom left repeat-x;
}
div.cat {
background: url({IF}/gradients/gradient_cat.gif) repeat-x;
width: 80%;
color: #FFFFFF;
}
div.cat a:link, div.cat a:hover, div.cat a:visited {
color: #FFFFFF;
text-decoration: none;
}
div.cat a:hover {
text-decoration: underline;
}
td.postbittop {
padding:0px;
background: #2d2d2d url({IF}/gradients/gradient_footer.gif) repeat-x;
}
div.cat .inlineimg {
_margin-bottom: -1px;
}
div#loginbox .inlineimg {
_margin-top: -1px;
}

Another little problem is when I try to click on the banner to bring me back to the home page, the only clickable area is where the stock banner used to be. How can I be able to click on the entire banner instead of that small portion.



Any help would be HIGHLY appreciated. Thank you.