Picky bar height question

Hi John

First, thank you for spending all this time. I really appreciate your
comments and your attention to detail. I am learning a lot.

I'm having such good luck here that I thought I may as well ask about
that. I seem to remember asking about this a very long time ago, and
I think I learned that having images expand to fill space in CSS is
very tricky indeed.

Consider this approach:

In .midHeader, add height:100px;
In .headerTitle, throw out padding-bottom: 2.25ex;

This has the effect of fixing the midHeader to be exactly the height of
your beach image, no matter how large or small the "Families Counseling
Center" text is. The subHeader, containing your navbar and disclaimer
text, won't move down when the user upsizes her text. Try this out and
see if that's what you want. When you say your image "isn't expanding
properly," you might mean you're not happy with the trade-offs for
resized texts. This approach has different trade-offs.

For reasons I don't understand, doing both of those shrinks the picture
height as displayed on the browser. Adding the padding back fixes it,
so I'm thinking it has to do with the giant header text. I'm leaving it
for now, to address the other issues below.

In other whiny-sounding suggestions:

In your CSS is: "/* ##### Header ##### -- I don't use superHeader */" .
So fine, don't use it. But then get it out of your CSS file. Copy those
five rules into a text file for safe-keeping, if you must, but I'll bet
you never need that stuff in your life, if you're not using it now. You
may want to likewise clean out your XHTML of the whole superHeader div.

Fixed -- on validation found one more instance of it that I'll get tomorrow.

You have a <div id="header"> in your code. Well, it seems that this
isn't really a header, but a container of your entire page. Maybe you
want to rename it? Or maybe, even better, you can get rid of it
completely. It seems to be referenced only in your print .css, and only
adds a black line as a bottom border. No, *wait*: I can't tell. The
reason is that you're missing some </div> closing tag(s). Probably you
need to add one before <div id="side-bar">.
Fixed, and </div>'s are now annotated, for my spatially challenged self

This is that validation

thing again.
The CSS now validates at W3. However, little did I know that I am

trying to write XTHML, so tomorrow I will learn more about that.

I try to scope out your code, but one little error throws

me off. I'm like a strictly compliant browser.[1]
Ha! But it's good to learn to write correctly, even for amateurs like me.

Your main heading is appropriately marked up as <h1>, but you've added a
class to it (maybe because you had to), so you have this:
h1 class="headerTitle">Families Counseling Center </h1
Ordinarily, h1 is pretty big by default, but your added class styles it
as .headerTitle {font-size: 337%;}, which ought to be enormous. But you
have to do 337% because of the font-size: 77%; in your body. See? It
gets sticky fast. :-)
Hopefully I can look at this tomorrow again.

One more: sizing things in mm is kind of weird for a Web page. It only
sometimes matches the millimeters on a user's screen, and will never
flex when the text is resized. Consider ems instead.

I had never noticed this; came with the template. Tomorrow I'll see what
the proper conversion is.

Hmm, more lecture than supportive technical assistance. I guess that's
why I'm a computer geek and not a family counselor...

Extremely supportive and very detailed tech assistance. Very much
appreciated.

[1]Maybe I don't really exist.
Striving for perfection is good, right?