::: Area #157 (comp.sys.acorn.programmer)
Message: #30437 (Read 8 times, has 0 replies, 8728 bytes)
Date   : Fri Apr  3 16:37:33 1998
From   : "A.Hodgkinson" of fidonet#2:254/27.2
To     : All
Subject: Re: Netscape 5 port..

In article <3524C7FD.3CE9@madge.com>, Mark Greenwood
<URL:mailto:mgreenwo@madge.com> wrote:

> A.Hodgkinson wrote:
>
> > Agreed as far as Navigator is concerned - if there was any one part of
> > the code I'd love to examine but hate to ever have to actually use, it's
> > the Navigator table widthing stuff. MSIE's table code, IMHO, is an awful
> > lot better than Navigator's.
>
> What's wrong with Netscape's table code? It's always worked for me,
> unlike any of the browsers I've used on RiscOS which normally crash when
> they encounter anything in angle brackets.

OK, you asked for it...! ;-)

At the outset I should point out that no browser conforms to RFC 1942
(which gives details on how you should width tables) mostly because it
doesn't contain anywhere near enough information. In the absence of any
spec saying what to do, the behaviour should at least be 'something
sensible' insofar as this is possible.

Comments refer to MSIE 4.xx, Browse 1.33 or later, Fresco 1.69 and
Navigator 4.xx unless stated. With other browsers, YMMV - the table
handling has varied quite a bit in basic behaviour from version to
version of both MSIE and Navigator.

Right, that said, three examples follow. They all use correct HTML (in
terms of them being page fragments). There's no point going into the
circles Navigator starts turning through when the HTML is broken,
because behaviour under broken HTML is undefined anyway. So I'll avoid
those issues.


First example
=============

<table width="100%">
  <tr>
    <td bgcolor="#ff0000" width="100">100 pixels</td>
    <td bgcolor="#00ff00" width="20%">20%</td>
    <td bgcolor="#0000ff" width="80%">80%</td>
  </tr>
</table>

I'd expect this to make a one row, three cell table with a 100 pixel
wide cell on the left and the two cells on the right taking up 20%
and 80% of the remaining space respectively. This might be one of
several tables I put underneath each other which have some title in
the left hand cell followed by, effectively, a percentage display
bar graph on the right.

Works in Browse. Works in MSIE 4. Completely broken in Fresco (as many
versions as I could lay my hands on, 1.69 being the newest I have)
but only because the % handling is broken - still, at least the 100
pixel cell stays that way (in v1.69). Navigator 4 gets close to the
expected result, but lets the left hand cell wander out to any size it
feels like. If you have several such tables, one under the other, the
result is a mess. I've not managed to solve this one, BTW, so if anyone
has a solution *other than* putting the whole thing in one big table
(too slow to render, non-progressive, etc. - there are potentially lots
and lots of these on one page) I'd like to know the answer!


Second example
==============

NB, the two tables below can be found at

http://www.acorn.com/~ahodgkin/compare/second_set/3b.html

and

http://www.acorn.com/~ahodgkin/compare/second_set/3a.html

respectively. To start with, consider this table:

<table>
  <tr>
    <td width="50">1</td>
    <td width="50">2</td>
    <td width="20%">3</td>
  </tr>
</table>

There's a problem in the third cell - the width of 20% is 20% of what,
precisely? Well, ignoring that, we should at least expect to see two
cells of 50 pixels width and 'something else'. Failing this, we should
at least get two cells of the *same* width and then 'something else'!

Under Browse, MSIE 4, Fresco 1.69 and Navigator 4, this is what you see.
The third cell width varies from browser to browser.

Now the utterly broken case:

<table>
  <tr>
    <td width="50">1</td>
    <td width="50">2</td>
    <td width="50">3</td>
    <td width="50">4</td>
    <td width="20%">5</td>
  </tr>
</table>

For some reason, as soon as you exceed 2 pixel specified cells with one
percentage specified cell, Navigator goes haywire. Rather than seeing
the logical extensions of the previous two examples, Navigator displays
four different sized cells and something arbitrary for the 20%. You
always see the same pattern - the up to the penultimate pixel specified
cell the cell widths will progressively decrease, then the final pixel
specified cell will be the widest of the lot.

Needless to say, MSIE, Fresco and Browse all render sensible tables.


Third and last example
======================

NB, the tables below can be found at URLs shown before each example.

This one is about cell heights and appearances. Suppose I want to do a
set of colour bars to represent some club colours for a club web site.
I'm not too bothered if they don't appear - it's just aesthetics - so I
decide to use tables as a low bandwidth approach rather than, say, a set
of images.

http://www.acorn.com/~ahodgkin/compare/second_set/8a.html

<center>
  <table width="90%" cellspacing="1" cellpadding="1" border="0">
    <tr>
      <td width="33%" height="8" bgcolor="#880000"></td>
      <td width="33%" height="8" bgcolor="#008800"></td>
      <td width="33%" height="8" bgcolor="#000088"></td>
    </tr>
  </table>
</center>

NB, this is a full page rather than a fragment which validates as HTML
4 transitional - I did this in case anyone tried to claim that the
Navigator behaviour is a result of the page being incomplete.

Anyway, this works fine in MSIE, Browse and Fresco. Navigator
displays... Nothing at all! Why? Well, it needs, in this context,
content in the cells for it to display anything...

So maybe I should just put some spaces in or something:

http://www.acorn.com/~ahodgkin/compare/second_set/8b.html

<center>
  <table width="90%">
    <tr>
      <td width="33%" bgcolor="#880000">&nbsp;</td>
      <td width="33%" bgcolor="#008800">&nbsp;</td>
      <td width="33%" bgcolor="#000088">&nbsp;</td>
    </tr>
  </table>
</center>

But spaces have height - so all four browsers mentioned so far give very
tall cells.

Sigh. What can we do? It's spacer GIF time! This is why you see so many
of those daft little single pixel GIFs clogging up network bandwidth -
the majority of them are there to get Navigator to acknowledge the
existance of table cells:

http://www.acorn.com/~ahodgkin/compare/second_set/8c.html

<center>
  <table width="90%" cellspacing="1" cellpadding="1" border="0">
    <tr>
      <td width="33%" height="8" bgcolor="#880000">
	 <img src="..." width="1" height="1" border="0" alt="">
      </td>
      <td width="33%" height="8" bgcolor="#008800">
	 <img src="..." width="1" height="1" border="0" alt="">
      </td>
      <td width="33%" height="8" bgcolor="#000088">
	 <img src="..." width="1" height="1" border="0" alt="">
      </td>
    </tr>
  </table>
</center>

I've abbreviated the 'src' attributes to keep the text width down -
they're specified in full (and are valid) in the actual Web based
example.

But what's this? MSIE and Navigator display tall cells still... This is
something I didn't copy in Browse (Fresco displays slightly taller
cells, but for different reasons!). MSIE is copying Navigator at this
point, I *think*. Basically, because there is white space between the
<td> and </td> tags and the <img> tag, MSIE and Navigator think that
there is some text (probably a space or two) in the cells. And therefore
we have the same problem as the &nbsp; example.

The final solution is this 'orrible hack - we have to make sure the
<td>, </td> and <img> tags are all on the same line:

http://www.acorn.com/~ahodgkin/compare/second_set/8d.html

<center>
  <table width="90%" cellspacing="1" cellpadding="1" border="0">
    <tr>
      <td width="33%" height="8" bgcolor="#880000"><img ...></td>
      <td width="33%" height="8" bgcolor="#008800"><img ...></td>
      <td width="33%" height="8" bgcolor="#000088"><img ...></td>
    </tr>
  </table>
</center>

And that, finally, works. Phew! All for some colour bars! I prefer the
first of the four tables myself, which MSIE, Browse and Fresco work on,
as it has no hacky images or white space worries... But Navigator falls
over on it.


Conclusion
==========

Shall I go on? There are the problems with missing </td>s, the way
that if you miss 'border = 0' off the <table> tag Navigator 4 puts
space in for the border anyway but doesn't then draw it, deeply
nested tables exhausing machine resources, and more, and more, and
more. It'd be quicker to say what's *right* with the stupid thing!

--
TTFN, Andrew (on behalf of myself, not my employer).

"Hold tight, lad, and think of Lancashire Hotpot!" - A Grand Day Out

--- EchoMaker 0.47
 * Origin: The Arcade BBS Usenet News Gateway (2:254/27.2)