Text over IMG using CSS?

Most of my code is being ignored.

The HTML:

<div class="imageprocess">
<img alt="" src="http://appliedcolors.com/wp-content/uploads/2011/08/process-no-text.jpg" />
<div class="texttitle1">
<p>Step 1:  Fill Deep Damage with Bondo Putty</p>
<div class="textprocess">
<p>Paint is a poor filler:  it shrinks 85% once dry.  Filling a scratch 4, 5 or 6 times with paint, waiting for it to cure, then wetanding and buffing can take hours...not practical for a busy tech.  We created a process in which you fill deep scratches with Bondo putty using a squeegee and then use a remover chemical—Paint Leveler—to remove the excess putty.  In a few minutes you create a flat and level foundation for color-matching paint.</p>
<div class="texttitle2">
<p>Step 2:  Choose a Matching Color</p>
<div class="textprocess2">
<p><Bleh bleh blah blah.</p>
</div>
</div>
</div>
</div>
</div>

The CSS:

.textprocess {
	position:absolute;
	font-size: 12px;
	top:32px; /* in conjunction with left property, decides the text position */
	left:18px;
	width:405px; /* optional, though better have one */
}
.texttitle1 {
	position:absolute;
	font-weight: strong;
	font-size: 20px;
	top:26px; /* in conjunction with left property, decides the text position */
	left:18px;
	width:415px; /* optional, though better have one */
}
.textprocess2 {
	position:absolute;
	font-size: 12px;
	top:280px; /* in conjunction with left property, decides the text position */
	left:18px;
	width:405px; /* optional, though better have one */
}
.texttitle2 {
	position:absolute;
	font-weight: strong;
	font-size: 20px;
	top:286px; /* in conjunction with left property, decides the text position */
	left:18px;
	width:415px; /* optional, though better have one */
}

The result:
http://appliedcolors.com/4-process-part-2.html