Re: History of S-100 Board company Industrial Micro Systems (IMS)


When it comes to width of displayed text, if you will use CSS for
layout rather than fixed width tables, the text on your pages will
readjust for various screen widths.

This is true - however - there are also disadvantages to CSS - in that
it's designed to manage text or graphics pretty well, but still has
short comings when handling text AND graphics. They BOTH have their
advantages, and should, IMHO - be used together to take best advantage
of both.

For instance - one of the real problems with layout comes with the
idea that some browsers handle zooming differently; some allow the
user to specify specific point sizes (ignoring page formatting,
including CSS); and then there are the graphics layout guys that
insist on laying out text and graphics in each other's "space"... Each
of these "issues" are best handled by a careful choise of tables and
CSS (not to mention that often you need to have alternate layouts of
the same page for different devices - I'll come back to that).

Take this page as an example - looks simple enough - but to make it
maximally accessible - one needs to rember there are three major
browsers (which handle zooming differently); and even within the same
browser (like Firebird) the user is "in control" in no small way, and
can wreck havok with layouts that can't "flex" gracefully.

http://earthworksaudio.com/18.html

Here we have text above, below AND beside a graphic - violating a
basic HTML "rule"... Since - as you noted - text expanding and
contracting next to a graphic (which may or may not be expanding or
contracting with the text - depending on the user's set preference)
wil (usually) lead to some ugly issues. Here, however - the problem
is solved by the careful use of tables. The central content is set in
a table having four rows and three columns. The top, left cell is
empty, the second cell contains the text and spans 2 columns.
The next row contains the top "slice" of the microphone picture -

http://earthworksaudio.com/graphics/18fmtop.gif

which includes the links to the right as part of the graphic (i.e.
the graphic is 498 pixels wide - and spans all three columns / cells).
The next row, left cell contains the bottom of the mics -- which is
only 84 pixels wide and is "anchored" to the top of the cell

http://earthworksaudio.com/graphics/18fmbottom.gif

This keeps it firmly anchored to the bottom of the graphic above -
making them appear as one picture. The middle cell contains more text
- and spans the third cell as well.

The text is now free to expand (or contract) with or without the
picture(s) - without bothering them - or messing up the layout too
terribly. Even if there were text beside the top slice - if it's
"anchored" to the bottom of it's cell - if the text beside it needs to
stretch the hieght of the row- the slice still sits "on top" of the
lower slice - keeping them intact. CSS also has a role here - try
printing the page (there is an icon on the left)...

Changing "media" (device) causes CSS to hide certain elements,
reposition others. This shows that the table resides in a CSS Layer so
that the whole table can be moved as needed - but the table insures
the graphics and text layout remains intact.

This is a simple example of using both CSS and table to their
strengths - and certainly not the only way to accomplish the goal...
it is, however - compatible with a very large number of browsers--
(Netscape - back to 4.something, I.E. back to 5.something, FireFox
back to 1.something, Opra, and Safari as well, and loads WAY faster
than a totally graphic solution (which doesn't zoom well); or other
"stuff" like Flash, etc.

The newest I.E. has better zooming, but the site behaves best using
FireFox or Safari - which adhere to the standards better... and while
FireFox and Safari are fast catching I. E. in saturation (making it
tempting to fine-tune for them) - one still needs to consider that
there are users "out there" that are sill on WebTV and other ancient
browsers that need minimal (html) stuff...

just my .02.
.

Relevant Pages

  • Re: Text Box - Layout in Table Cell
    ... there is no cell for it to be forced into. ... In Line with Text regardless of the Anchor setting, ... 2- Layout in Table Cell has no effect if there is no table and is the ... jump around and move graphics in seemingly random ways. ...
    (microsoft.public.word.pagelayout)
  • Layout Breaking Up With Stretchable Content
    ... I need some CSS layout guidance because I think I've been staring at ... I need the top graphics to stay at the top, ... arise) and the bottom graphics to stay at the bottom. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: Layout Breaking Up With Stretchable Content
    ... I need some CSS layout guidance because I think I've been staring at ... I need the top graphics to stay at the top, ... arise) and the bottom graphics to stay at the bottom. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: New to non-table layout trying CSS div layout with difficulties.
    ... I've been using CSS for style for several years now, ... I'm hoping to have a large cell with the ... My problem is I simply can't get the DIV tags to align side by ... The sample you provided is nowhere near non-table layout. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: New to non-table layout trying CSS div layout with difficulties.
    ... I've been using CSS for style for several years now, ... attempted a layout using CSS. ... I'm hoping to have a large cell with the ... My problem is I simply can't get the DIV tags to align side by ...
    (comp.infosystems.www.authoring.stylesheets)