Why don't cells align top?

Question

First, I am a print designer and this web stuff is just too geeky for me. I never had a problem with this type of thing in FrontPage, but it seems to me like DW likes to do what it wants to do regardless of what you do with your mouse. What I mean by this is I click on something and it doesn't "stick".
Anyway, I'm trying to make this simple little table (yes, tables, CSS is a programming language and I don't get it). I want the images and text to line up at the top of each cell. Used to be easy.
Examples here:
http://www.ashronbilling.com/wpe/waterproofing.html
http://www.ashronbilling.com/wpe/decks.html
http://www.ashronbilling.com/wpe/undertile.html
WHY do the first item in waterproofing.html and the last item in undertile.html refuse to align top? Why do all items in decks work? I know I have messed around with these files because I get frustrated and then things just get weird and don't work. Every time I get to a point where I want to punch my monitor I start over and I end up with the same cr@p.
Is there a heirarchy between HTML and CSS? Why can't you use JUST ONE? I think I'm compounding my problems by just trying to click on everything there is to click on. Don't have these problems in print...
I appreciate your patience with me and just need someone to show me the way to do this correctly.

Answer 1

waterproofing.html page:
Paragraph tags have default margin and padding already set. You need to firstly zero it out by amending your paragraph style1 css as shown below. Then adjust how much space you want by adding some back in top, right, bottom, left. 0, 0, 0, 0.
Also you have an extra } brace after your style8 css selector which will interfere with the css cascade if you don't remove it.
.style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    vertical-align: top;
margin: 0 0 0 0;
padding: 0 0 10px 0;
.style8 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14pt;
    color: #2260a6;
} /* Delete this rogue bracket */
.cell-top {
    vertical-align: top;
undertile.html:
I'd make sure you control the margin and the padding on the paragraph tags like the previous page.
.style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    vertical-align: top;
margin: 0 0 0 0;
padding: 0 0 10px 0;
Also you need to make sure the images in the left table cell are aligned to the top of the cell. By default they are aligned vertically in the middle of the cell.
You could select the <td> cells individually, go to the properties inspector and select 'top' from the 'Vert' align pop up in the lower left corner.
You could tell all content on your page to align to the top of the table cells with css:
table td {
vertical-align: top;
Frustration WILL I'm afraid get the better of you unless you know how html and css work. There is no quick fix, its months and months of a steep learning curve, just like any other profession. It takes time and patience.