Hi
There are a number of differences between your code on wp.com and your standalone site
This is the start of the header code from wp.com
<`div id=”header”>
<div id=”menu”>
</div>
<div id=”header-box”>
<div id=”header-image”>
<img src=”http://healthydelicious.files.wordpress.com/2009/02/cropped-hdhead12.jpg” alt=””>
</div>
<div id=”header-overlay”>
<img src=”http://s2.wordpress.com/wp-content/themes/pub/digg3/images/bg_header_overlay.png” alt=””>
</div>`
This is the start of the header code from your site:
<div id="container">
<div id="menu">
<ul>
<li><a href="http://healthy-delicious.com/" title="healthy-delicious.com">Home</a></li>
<li><a href="http://healthy-delicious.com/about/" title="About">About</a></li>
<div id="header">
<div id="pagetitle">
<h1><a href="http://healthy-delicious.com/" title="healthy-delicious.com"></a></h1>
</div>
Also, on your site you have attached your image as a background image using CSS, which is not how it is done on the wp.com site.
The header area CSS also is different between the two sites.
Your best bet is to copy how your wp.com site is set up as closely as you can.
oops, i messed up the top code – let me post the wp.com code again
This is the start of the header code from wp.com
<div id="header">
<div id="menu">
<ul>
<li><a href="http://healthydelicious.wordpress.com/" title="Healthy Delicious">Home</a></li>
<li class="page_item page-item-2"><a href="http://healthydelicious.wordpress.com/about/" title="About">About</a></li>
</ul>
</div>
<div id="header-box">
<div id="header-image">
<img src="http://healthydelicious.files.wordpress.com/2009/02/cropped-hdhead12.jpg" alt="">
</div>
<div id="header-overlay">
<img src="http://s2.wordpress.com/wp-content/themes/pub/digg3/images/bg_header_overlay.png" alt="">
</div>
