Images being cut off in IE7

Ok, so I've been struggling with this problem for some time now, and have read countless forums but I haven't yet found a solution that worked for me. For some reason, images towards the top of the page are being cut off, such as the cloud(1.). Secondly, the input field(2.) and submit button(3.) don't show a background? I've attached an image of what it should look like on top, and the bottom is what appears in IE7.

The website url is www[dot]letterphotography[dot]net

http://www.letterphotography.net/ie7.jpg

Here is the HTML for the cloud image and text, input field, and submit button.
<div class="cloudtext">
<div class="ctext">
<center>
Choose from over 350 timeless
letter &amp; heart pictures. Utilize our different
designing options to create a truly unique,
and personal namesake.
</center>
</div><!--ctext-->
</div><!--cloudtext-->

<div class="inputbox">
<form action="create.php" method="post"><input class="name" type="text" name="word" maxlength="11" value="anything at all" onfocus="value=''" /><input class="spellit" type="submit" value="Spell it!" title="spell It!" alt="spell It!" /></form>
</div><!--inputbox-->
</div><!--createsection-->

Here is the CSS of the cloud image, input box, and submit button.

div.cloudtext {
width:334px;
height:136px;
background:url(clouds.png);
background-repeat: no-repeat;
display: block;
float:left;
margin:-70px 0 0 0;
}

div.ctext {
text-align:center;
width:290px;
color:#4C331E;
font-family:droid sans;
font-size:12px;
line-height:18px;
font-weight:700;
z-index:2;
margin:41px 0 0 35px
}

div.inputbox {
margin: 40px 0 0 0;
width: 350px;
height: 70px;
float:right;
position: relative;
left: -160px; top: -24px;
}

input.name {
height:30px;
width:170px;
background-color: #fff;
font-size:18px;
font-weight:700;
color:#4C331E;
font-family:Trebuchet MS;
letter-spacing:1px;
-webkit-border-bottom-left-radius:7px;
-webkit-border-top-left-radius:7px;
-moz-border-radius-bottomleft:7px;
-moz-border-radius-topleft:7px;
z-index:2;
margin:0;
}

input.spellit {
vertical-align:middle;
background:#D4F576;
border:0px solid #000;
height:70px;
width:150px;
font-family:trebuchet ms;
font-size:18px;
color:#4C331E;
-webkit-border-bottom-right-radius:9px;
-webkit-border-top-right-radius:9px;
-moz-border-radius-bottomright:9px;
-moz-border-radius-topright:9px;
margin:0 0 0 10px;
}

input.spellit:hover {
vertical-align:middle;
background:#E6F7B6;
border:0px solid #000;
height:70px;
width:150px;
font-family:trebuchet ms;
font-size:18px;
color:#4C331E;
text-decoration:underline;
-webkit-border-bottom-right-radius:9px;
-webkit-border-top-right-radius:9px;
-moz-border-radius-bottomright:9px;
-moz-border-radius-topright:9px;
margin:0 0 0 10px;
}


Also, so no one wastes their breath, I do have the html and body set to zero margin and padding.

Thanks everyone for looking, hopefully I can figure this out sooner than later.

-Tyler

http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

I've actually found this to work

---

you should also try to set a z-index to your header, because it seems as though it is cutting off the content