Greetings.  I'm webmaster for a Boy Scout Troop website. I'm fairly
competent at writing Perl CGI back-end stuff, but I'm not so
knowledgeable when it comes the tricks and techniques to make a
website "pretty" and there's something I'd like to do but don't know
how...

If you visit my site at http://www.troop606.com you will see that I'm
using frames to position a static banner across the top.

The topmost frame contains (only) an image.  I use fixed height but
100% width so that the image will span any size browser window.  The
second frame contains (only) our Unit Name, "Troop 606, Portland,
Oregon" as ordinary text (ie, not an image).

I would prefer to superimpose that text in the lower lefthand corner
of my image, and get rid of the second frame that's dedicated to
holding the text.  But I'm not sure how to do that.  I tried making
the image a background, but I couldn't make it scale. If I make the
text an actual part of the image, it looks funny when it scales (the
text grows and shrinks).

Since this is my page's main banner, I don't want to get too "modern"
- it should render even on fairly old browsers, and CERTINALLY not be
specific to any particular browser.

So the requirements are:
   1. Superimpose the text in the lower LH corner of the image
   2. The image scales across the browser window, but the text is a
fixed size and position (even if the window is resized).
   3. The banner should render on browsers back to: IE 5.x, NS 4.7x,
Mozilla (including Phoenix/Firebird) 1.1, Opera 7.x, Konqueror 3.x,
Galeon.

The answer should consist of the necessary HTML code to paste into my
homepage. The answer can include style-sheet or javascript stuff
provided it meets the browser requirement.

It may not be possible to meet the third criteria.  If not, I would
accept an answer that includes "browser detection" and serves the new
content to newer browsers but falls back to my current scheme for
older browsers.  Since that answer would be more involved, it would
earn a 50% bonus.

My current code is readily available by viewing the page and frame
source on the website, so I won't bother to paste it here.

Thanks!!!!!

---

Request for Question Clarification by larre-ga on 20 May 2003 15:14 PDT

There -are- at least a couple possible solutions available to you,
however, they don't meet all your criteria, particularly legacy
compatibility. CSS solutions won't render properly in the Mozilla
versions specified. The limitations are imposed by the nature of HTML
and the ways that various browsers deal with backgrounds vs. images.

Backgrounds repeat (or not), images scale within frames, but as you've
discovered they don't quite allow the sort of effect you're working
for. It's possible to impose a transparent layer (using CSS <div>) on
top of another image, however, this can display very strangely in
older browsers.

I can offer a solution that is compatible with the earliest browsers
that render simple tables, however, it's more of a graphics fix than
straight HTML. By some judicious "pre-stretching" and creating a
panorama version of your original image, we'd be able to achieve
compatibility with a wide variety of possible platform/browser
combinations, without sacrificing the look and feel you're after, and
can also somewhat simplify your coding requirements, though it adds
approximately 9K to page "weight" in image download, perhaps 1-2
seconds additional download time at 56K.

If this sounds good, I'd be happy to post the code and modified image.

--larre-ga

---

Clarification of Question by davidfilmer-ga on 20 May 2003 17:12 PDT

Greetings.  Thank you for your timely response.

Your proposal sounds very intersting and sounds like it would do what
I want (though I can't imagine how; I'll be very interested to see
what you have in mind).  I don't think the additional page weight
would be much problem (and hopefully the image will cache for most
people).  Please post the code that you proposed.

Thanks!

Thanks for asking!

I have done a bit of image stretching, widening the image to
approximately 1,000 pixels from the original 750. I then increased the
canvas width and popped in a duplicate copy of the image, flipped
horizontally, and matched edges. The background image is now 2,000
pixels wide, which should accommodate even the largest monitor sizes.
I've placed the image as a background in a simple 1 cell X 1 cell
table, in the tablecell background only, to avoid the background
peculiarities of older versions of 'Zilla and NS. Most visitors will
never see the full width.

The modified code is in a file named banner.html, at:

http://64.127.138.113/i1/banner.html


You may compare this to your own banner.html at:

http://12.224.133.122/banner.html

The code may be snatched by viewing the source, and you may save the
image by right clicking and selecting "Save Background As" in IE, or
collecting a copy direct from the image location at:

http://64.127.138.113/i1/mthood2.jpg

You will be able to eliminate the middle "text only" frame from your
Frameset document.

The code does not validate under some interpretations of HTML
standards, but instead is a developer's "quick and dirty" fix that
should provide backward and [reasonably] forward compatibility.

Hopefully, this method will provide a satisfying solution. If not,
I'll be happy to see if I can come up with a CSS or javascript
alternative. If you have any questions about the code or image,
please, feel free to ask.

--larre

That's Great - and surely it will work in nearly ANY browser!  Maybe
not Mosaic, but as far as I know nobody in the Troop is using Mosaic
;)

The Troop and I thank you!