Hello everybody --
Forgive my multi-posting my question. I posted first to ciwah, but I
learned that ciwas is the better group for this CSS question.
The problem has me stopped. The page:
http://www.key-horse.com/fftst.html
is rendered completely differently by Firefox 1.0 and IE 6.0. The code
seems to me perfectly straightforward and simple: show two small tables
side-by-side and top-aligned when the browser window is wide enough,
else show the tables arranged vertically. Both of the tables and the
div that contains them have 1px borders.
My CSS must be wrong: IE6.0 does as I expect, whereas FF1.0 does
something surprising, meaning:
1. Tables look to be only one row deep in FF;
2. Tables seem to be bottom-aligned in FF; and
3. In FF, the tables escape their 1px-blue-bordered containing div.
How shall I style these two tables so they render as I wish them to?
Just one note: someone suggested in ciwah that I might float or
otherwise position these tables. Instead, I use display: inline because
I want to let the browser treat the two tables as simple inline
elements without any positioning. Is there something wrong with that
usage? Some implication I'm not understanding? The idea of this
treatment is to accomodate lots of displays, especially mobile devices.
Thanks!
-- Pete