Beginner: Creating Buckets in HTML and CSS - html

Question

I am attempting to create a bucket in HTML and CSS by placing a header image on top of a bottom image. When i do this in dreamweaver, there is no gap between the two objects. However, when I upload it to a server, a gap develops between the two images. Any help or suggestions?
<div class="wrapBucketInnerLeft">
<div class="bucketLeft">
<h2 class="bucketHeader"><img src="images/bucket_header_text_basic.png" width="212" height="36" alt="Basic Plan" /></h2></td></tr>
<div class="bucketDetails">
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
<li>Feature 4</li>
</ul>
<div class="bucketBottom">
<p class="cost">$1.95</p>
<img class="button" src="images/button_bucket.png" width="117" height="42" alt="Learn More" /></div>
</div>
</div>
<!--Bucket 2-->
<div class="bucketRight">
<h2 class="bucketHeader"><img src="images/bucket_header_text_economy.png" width="212" height="36" alt="Basic Plan" /></h2>
<div class="bucketDetails">
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
<li>Feature 4</li>
</ul>
<div class="bucketBottom">
<p class="cost">$1.95</p>
<img class="button" src="images/button_bucket.png" width="117" height="42" alt="Learn More" /></div>
</div>
</div>
</div>
CSS:
.bucketHeader {
background-image:url(images/bg_header_bucket.png);
background-repeat:no-repeat;
background-position:top center;
height:46px;
margin:0px 0px 0px 0px;
padding:14px 0px 0px 18px;
}
.bucketDetails {
background-image:url(images/bg_bucket.png);
background-repeat:no-repeat;
background-position:top center;
height:278px;
margin:0px 0px 0px 0px;
padding:0px;
}
.bucketBottom p.cost {
font-size:28px;
font-weight:bold;
color:#335191;
margin:0px 0px 6px 0px;
padding:0px;
}
.bucketBottom{
text-align:center;
}
a img.button {
border:none;
}

Answer 1

well i know what is it! padding of .bucketHeader
.bucketHeader {
background-image:url(images/bg_header_bucket.png);
background-repeat:no-repeat;
background-position:top center;
height:46px; // here reduce the height of this div until the gap between them is removed, i think it should be 28px
margin:0px 0px 0px 0px;
padding:14px 0px 0px 18px; // here you see you have given padding of 14px of both top and bottom, this increases the height of div magically which you can't see because your image has background-repeat:no-repeat
}

Answer 2

Why are you using background-image? Do you see how the header and bottom images have like a pixel offset on the right side like this? Why don't you use div's with the images in them instead and don't put position:relative; top:0px to get the job done. You can put whatever text you want within a div with higher z-index ontop of the divs with the images and ofset top:-(whatever the height of the other div is)px or left:(whatever the width is)px?
Just a thought.
Cheers!