Stylesheets - Picky bar height question

Author

Picky bar height question

dtmfcc

2007-03-23, 11:20 pm

My website is at www.simi-therapy.com
My CSS is at http://www.simi-therapy.com/simitherapy-screen.css

Question -- on the dark blue bar under the beach image, one change
caused another unanticipated one, and I can't seem to figure it out.

I added the phrase "...an association of independent practitioners",
and with some help, got it to align to the right. But now, the blue
bar is taller by about the height of the text than I want it to be. I
can't seem to figure out the fix.

Any help appreciated -- I'm a novice.

Deborah

John Hosking

2007-03-24, 7:19 pm

dtmfcc wrote:
> My website is at www.simi-therapy.com

> Question -- on the dark blue bar under the beach image, one change
> caused another unanticipated one, and I can't seem to figure it out.
>
> I added the phrase "...an association of independent practitioners",
> and with some help, got it to align to the right. But now, the blue
> bar is taller by about the height of the text than I want it to be. I
> can't seem to figure out the fix.

You have:
<div class="right"><a href="disclaimer.html">... an association of
independent practitioners</a></div>
<div class="spacer"> </div>

Wouldn't you be happier without the spacer div?

The spacer div is doing two things "for" you: (1) adding height to your
subHeader by being another block-level element contained within it; and
(2) preventing subsequent elements from lining up next to your menu and
disclaimer text. If you really need the clearing, add clear: both; to
your subHeader rule, but I think you don't need it at all. Test and see!

>
> Any help appreciated -- I'm a novice.

*Any* help? Ha! You've fallen into my little trap! I'd like to point out
a couple of other things which may help you.

If you're a novice, you're probably better off coding in HTML 4.01
strict rather than XHTML. The reasons are often discussed here and in
other NGs, but it might help to change now, before you get the whole
site... oh, oops. Too late.

Well, if you do stay with XHTML, or even if you use HTML, you ought to
validate your code and CSS:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

In your CSS I see:
font-size: 77%; /* Enables font size scaling in MSIE */

Since you've enabled scaling (good!) why not use 100% for the body's
text, rather than only 3/4 of what we visitors have set for our
defaults? We can change the size downwards (even in IE, thanks!) if we
need to, but we might *not* have to if we can read the text at first
glance because it's exactly our preferred size.

Your site looks extremely good, Deborah. I suspect you had a skilled
professional do the main work, yes? There are rather a *lot* of classes,
but the site seems to hold together very well. Beyond that, the site is
friendly and reassuring; I would confidently call or visit your practice.

HTH. GL!
--
John

Deborah

2007-03-24, 7:19 pm

John

Thank you for your detailed reply! My reponse is long -- I hope that's ok.

I should mention right at the top that I used a template from
http://www.oswd.org/design/preview/id/1165/ . It is actually the
alternate screen css . I'm pretty sure it was valid when I downloaded
it, but you're right, I should run it again. But sometimes then the law
of unintended consequences applies, and I cause myself problems that I
don't always know how to solve. More on that later.

If you look at the superheader CSS in the screen-alt CSS code, I'm
wondering if you can help me by seeing the solution there, in comparison
to my subheader code as it ended up.

John Hosking wrote:
> dtmfcc wrote:
>
>
> You have:
> <div class="right"><a href="disclaimer.html">... an association of
> independent practitioners</a></div>
> <div class="spacer"> </div>
>
> Wouldn't you be happier without the spacer div?
>
> The spacer div is doing two things "for" you: (1) adding height to your
> subHeader by being another block-level element contained within it; and
> (2) preventing subsequent elements from lining up next to your menu and
> disclaimer text. If you really need the clearing, add clear: both; to
> your subHeader rule, but I think you don't need it at all. Test and see!

In order to get this to line up, I had actually received some help from
someone on this newsgroup, I think. Removed the spacer div causes the
bar to become almost invisible, and the text to almost disappear.
Basically then I see just the top edge of everything.

What is interesting about this is that in the original Sinorca alternate
view, the superheader code has the left and right alignment, and both
the superheader and subheader bars are the right height. I only use the
subheader, and it was the right height until I added the right-aligned
"disclaimer" text. All that to say, "I dunno"
>
>
> *Any* help? Ha! You've fallen into my little trap! I'd like to point out
> a couple of other things which may help you.
>
> If you're a novice, you're probably better off coding in HTML 4.01
> strict rather than XHTML. The reasons are often discussed here and in
> other NGs, but it might help to change now, before you get the whole
> site... oh, oops. Too late.
>
> Well, if you do stay with XHTML, or even if you use HTML, you ought to
> validate your code and CSS:
> http://validator.w3.org/
> http://jigsaw.w3.org/css-validator/

I will attempt, with great caution. I know it's needed, but I'm a
little afraid at this point.

>
> In your CSS I see:
> font-size: 77%; /* Enables font size scaling in MSIE */
>
> Since you've enabled scaling (good!) why not use 100% for the body's
> text, rather than only 3/4 of what we visitors have set for our
> defaults? We can change the size downwards (even in IE, thanks!) if we
> need to, but we might *not* have to if we can read the text at first
> glance because it's exactly our preferred size.

Unintended consequences again. When I do that, then my midheader
graphic or the area behind it gets messed up, The graphic is still
fine, but there appears a narrow band of light blue (side bar text
color) between the mid-header and the subheader. I know it's "impolite"
to impose the text size, but I'm not skilled enough to fix that part.
It's also what was on the template, so I don't know if the designer had
the same issue or not.
>
> Your site looks extremely good, Deborah. I suspect you had a skilled
> professional do the main work, yes? There are rather a *lot* of classes,
> but the site seems to hold together very well. Beyond that, the site is
> friendly and reassuring; I would confidently call or visit your practice.

Thank you, but again, see above. It's a really great template; very
simple and clean. You're right about a lot of classes, but from my
expertise of reading 1 CSS book, who am I to complain? I come to
realize that CSS is a very "spatial" language, and being geometrically
challenged I can't always keep the "boxes within boxes" imagery properly
in my head.

>
>
> HTH. GL!

Thanks for your help and kind comments.

Deborah

2007-03-24, 7:19 pm

Hi all

I should also add that I'm pretty sure that the reason my site has
problems with the beach image when you increase the text size is because
my image isn't expanding properly. I think I remember trying all sorts
of fixes to that, and concluding that it probably wasn't infinitely
adjustable, hence my attempt to control the text size.

Oh what a tangled web we weave ..... just for a pretty beach picture!
That has the making of a really bad pun. Oh well.

Thanks again,

Deborah

Deborah wrote:
> John
>
> Thank you for your detailed reply! My reponse is long -- I hope that's ok.
>
> I should mention right at the top that I used a template from
> http://www.oswd.org/design/preview/id/1165/ . It is actually the
> alternate screen css . I'm pretty sure it was valid when I downloaded
> it, but you're right, I should run it again. But sometimes then the law
> of unintended consequences applies, and I cause myself problems that I
> don't always know how to solve. More on that later.
>
> If you look at the superheader CSS in the screen-alt CSS code, I'm
> wondering if you can help me by seeing the solution there, in comparison
> to my subheader code as it ended up.
>
> John Hosking wrote:
>
> In order to get this to line up, I had actually received some help from
> someone on this newsgroup, I think. Removed the spacer div causes the
> bar to become almost invisible, and the text to almost disappear.
> Basically then I see just the top edge of everything.
>
> What is interesting about this is that in the original Sinorca alternate
> view, the superheader code has the left and right alignment, and both
> the superheader and subheader bars are the right height. I only use the
> subheader, and it was the right height until I added the right-aligned
> "disclaimer" text. All that to say, "I dunno"
>
> I will attempt, with great caution. I know it's needed, but I'm a
> little afraid at this point.
>
>
> Unintended consequences again. When I do that, then my midheader
> graphic or the area behind it gets messed up, The graphic is still
> fine, but there appears a narrow band of light blue (side bar text
> color) between the mid-header and the subheader. I know it's "impolite"
> to impose the text size, but I'm not skilled enough to fix that part.
> It's also what was on the template, so I don't know if the designer had
> the same issue or not.
>
> Thank you, but again, see above. It's a really great template; very
> simple and clean. You're right about a lot of classes, but from my
> expertise of reading 1 CSS book, who am I to complain? I come to
> realize that CSS is a very "spatial" language, and being geometrically
> challenged I can't always keep the "boxes within boxes" imagery properly
> in my head.
>
>
> Thanks for your help and kind comments.

dorayme

2007-03-24, 7:19 pm

In article
<1174694383.602339.233170@l75g2000hse.googlegroups.com>,
"dtmfcc" <deborah1633@sbcglobal.net> wrote:

> My website is at www.simi-therapy.com
> My CSS is at http://www.simi-therapy.com/simitherapy-screen.css
>
> Question -- on the dark blue bar under the beach image, one change
> caused another unanticipated one, and I can't seem to figure it out.
>
> I added the phrase "...an association of independent practitioners",
> and with some help, got it to align to the right. But now, the blue
> bar is taller by about the height of the text than I want it to be. I
> can't seem to figure out the fix.
>
> Any help appreciated -- I'm a novice.
>

If you remove the spacer div (as mentioned by JH), you can
ameliorate the problem that the spacer was meant to address by
giving a guessed value to bottom padding like:

..subHeader {

padding: 1ex 1ex 2.5ex 1.5mm;

instead of your 1ex.

This is mildly ok for a few clicks of text size changes.

Try this if the game is to make the least changes (and so have
more time to concentrate instead on saving families from train
wrecks ahead).

--
dorayme

zzpat

2007-03-24, 7:19 pm

John Hosking wrote:
> dtmfcc wrote:
>
>
> You have:
> <div class="right"><a href="disclaimer.html">... an association of
> independent practitioners</a></div>
> <div class="spacer"> </div>

The spacer class needs display:inline; if you're using a block element
(div). Should do it.

zzpat

2007-03-24, 7:19 pm

zzpat wrote:
> John Hosking wrote:
>
> The spacer class needs display:inline; if you're using a block element
> (div). Should do it.

Or...better yet, try removing from the spacer div.
<div class="spacer"></div>

Deborah

2007-03-24, 11:16 pm

Thanks to all of you for the fixes. Removing the helped, and
changing the subheader padding fixed it the rest of the way.

Mid-morning I had added the following post

I should also add that I'm pretty sure that the reason my site has
problems with the beach image when you increase the text size is because
my image isn't expanding properly. I think I remember trying all sorts
of fixes to that, and concluding that it probably wasn't infinitely
adjustable, hence my attempt to control the text size.

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.

Thanks again for the subheader help. I'm uploading the fixes in just a
moment.

Deborah

John Hosking

2007-03-24, 11:16 pm

Deborah wrote:
>
> Mid-morning

....maybe where *you* are...

> I had added the following post

Since you're replying to that very post, you can just leave that part of
your post as quoted text. Thunderbird does that really nicely; you just
insert your new comments on lines following the relevant quoted stuff,
and delete the parts you aren't addressing.

> I should also add that I'm pretty sure that the reason my site has
> problems with the beach image when you increase the text size is because
> my image isn't expanding properly. I think I remember trying all sorts
> of fixes to that, and concluding that it probably wasn't infinitely
> adjustable, hence my attempt to control the text size.
>
> 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.

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.

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">. This is that validation
thing again. I try to scope out your code, but one little error throws
me off. I'm like a strictly compliant browser.[1]

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. :-)

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.

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

[1]Maybe I don't really exist.

--
John

dorayme

2007-03-24, 11:16 pm

In article <4605c870_7@news.bluewin.ch>,
John Hosking <John@DELETE.Hosking.name.INVALID> wrote:

> I try to scope out your code, but one little error throws
> me off. I'm like a strictly compliant browser.[1]>

> [1]Maybe I don't really exist.

There is no maybe about it. If you are like something then you
must exist.

It is no use trying to argue the toss on this by saying that you
might be like something that does not exist and so could very
well share in not existing yourself. There is deep trouble with
this defence.

Look, why not simply trust me and put all your worries about your
existence aside.

--
dorayme

Deborah

2007-03-25, 4:17 am

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.

>
> 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?
>