[CLUE-Tech] How do website authors maintain their sanity?

[Jed S. Baer]

Or do they?

I'm working on a client website here, and the problem
I'm trying to solve is that the previous designer
"solved" the "it absolutely must look this way in
all browsers" problem by incorporating the look of the
site into a 600K 1900x2208 background image. My goal
is to chop that image into constituent pieces and
place them along the top and left of the page, such
that the layout accomodates different width viewports
in visitors' web browsers. The existing image has no
content other than top/left border treatments.

It's here: http://rmsel.org/index.htm

My initial approach was to use absolutely positioned
(via CSS) <DIV> elements combined with a non-repeating
body background image (for the left side) to reporduce
it. This failed miserably, when Galeon choked on some
of the positioning.

My second approach was to stick with the non-repeating
body background for the left-hand border, but use table
tags to get everything else lined up. This almost worked,
but testing under IE revealed that things which lined up
in Galeon, didn't quite line up using IE. The table
cells weren't quite exactly matched to the background
image where they needed to be. This can be viewed at
http://rockchucker.com/rmsel/

My third approach was to chop things up even more,
abandon the body background image, and put  all the
image pieces into cells in the table. This has been
almost as disastrous as trying to use only CSS.

Here's the table layout.

+--+----+-----+---------------------------+-----------+
|       |                                 |           |
|  i    +---------------------------------+           |
|       |           b                     |    i      |
+--+----+-----+---------------------------+           |
|  |          |     b      4              |           |
|i |          +---------------------------+-----------+
|  |          |                                       |
|1 |          |                                       |
|  |          |                                       |
|  |          |                                       |
|  |    x     |                                       |
|  |          |                                       |
|  |          |                                       |
|  |          |               c                       |
|  |          |                                       |
|  |          |                                       |
+--+----+-----+               5                       |
|       |     |                                       |
| f     | b   |                                       |
|       |     |                                       |
| 2     | 3   |                                       |
|       |     |                                       |
+--+----+-----+---------------------------+-----------+

  i == cell size matches image
  f == cell filled by background image
       but must expand vertically as necessary
  x == cell must be exact size
  c == content area, expands as necessary
  b == blank areas

Cell 1 contains an image and is exactly sized:
  <td height=433><img ... ></td>

Cell 2 has a background image:
  <td background="img">
  (applied via stylesheet for browsers which don't
   support the background attribute)

There are at least 2 problems here.

If cells 2 and 3 are empty, Galeon sets their height
to zero. Adding some dummy content works, but there's
more. (And Galeon ignores the min-height CSS attribute,
AFAICT.)

If the combined height of cells 4 and 5 is more than
cells 1 and 2, Galeon is expanding the height of cell 1
to compensate, instead of cells 2 and 3. Again, ignoring
any HTML/CSS attribute giving cell 1 a fixed height,
while cells 2 and 3 have no such attributes.

I'll also note that both Galeon and Konqueror are both
choking on the cell layout, although in different ways,
by not properly handling the colspan attributes. I haven't
tried the new code out in IE yet, but I'm not hopeful. I'm
anticipating that Netscape4 will be completely toast, but
I'm not sure it's worth worrying about.

Note, Galeon uses the Gecko (Mozilla) rendering engine.

If anyone has any suggestions, I'm all ears. My next idea
will result in changing the site layout, and maybe that
will be OK.

jed
-- 
http://s88369986.onlinehome.us/freedomsight/

... it is poor civic hygiene to install technologies that could someday
facilitate a police state. -- Bruce Schneier