Hey folks,

I am just in the process of trying to wrap my head around CSS vs. old-style table-based HTML.

I have been trying to establish the basic "frame" (no not that kind ;) of the template before getting into the nitty gritty.

I ran into 2 problems after my first afternoon:

1) When I shrink the window, the left edge of the background image for my "main content" edges off the left hand of the screen, but doesn't act the same in my header and footer. As a result the design losed integrity when the window is small. (There is a pale blue edge on both sides of the central block from the top to bottom on each side. Well at least there is when the window is wide enough! I can't figure out why the middle block is acting differently from the header.

More info as I try to debug this: I had some copy in the central block and it was obscuring that left blue edge. Taking it out now, I see that that it the header and "middle" edge are never lined up even when the screen is sufficiently wide. This in spite of the fact that the two background images used are cut from the same original.

I may need more help here than I thought :/

I thought I might be able to learn enough to do the basic layout myself. But that isn't happening - so unless anyone can offer a good book on CSS for a former coder.... I may need to find some hired help to at least get me started.

2) I had issues with my "content" slipping under my header. (I hacked my way around this by using a "top=..." but I am not sure why I had to do that. I understood that the various div blocks would lie beside or below the preceding ones unless I specified otherwise. I guess this part isn't a big deal, since I found a work-around, but I think I might be missing a broader concept.

You can see the page I am working on at: http://www.clearintent.com/newsite/help/index.html

And my style sheet file is at: http://www.clearintent.com/newsite/help/css/main.css

The "hack" I mentioned is at line 81 of the style sheet, basically the last line in this block:

#content
{
position: relative;
padding-bottom: 1em;
background-color: #e7f6f5;
background-image: url(../../images/mid-bg.gif);
background-position: center;
background-repeat: repeat-y;
height: 100%;
top:74px; /*why is this necessary?? */
}

And perhaps another simple (?) question - in terms of online documentation of CSS, I have mostly been finding very specific answers and references OR REALLY basic stuff like how to set bolds and italics.... amy recommendations on resources that will help me through the transition from tables to the more powerful CSS techniques?

Thanks so much - any help is greatly appreciated,
Teo