Stylesheets - Seemingly-simple valid CSS-styled table matter renders diff in FF1.0, IE6

Author

Seemingly-simple valid CSS-styled table matter renders diff in FF1.0, IE6

Pete

2005-01-25, 7:23 pm

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

Spartanicus

2005-01-25, 11:19 pm

"Pete" <pete142@yahoo.com> wrote:

>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.

This is far from straight forward due to Mozilla's lack of support of
the required "inline-table" css value.

You may be able to hack around that by setting the display value to
"inline" first (followed by inline-table), but be warned that Mozilla
does weird things when you do that, and it has bugs concerning usage of
the vertical-align property.

IE also doesn't support inline-table, but IE is so stupid that
display:inline actually does make the table act like an inline-table.

>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?

Apparently you missed that this person also told you that setting the
display property of a table to "inline" is not correct. Given the
problems that Mozilla poses floating may be the best way if the tables
do not need to be centered, and if you know how to avoid the drawbacks
associated with floating.

--
Spartanicus

Pete

2005-01-25, 11:19 pm

Spartanicus wrote:

<< Apparently you missed that this person also told you that setting
the display property of a table to "inline" is not correct. >>

This person told me: << You seem to have set display: inline for your
tables. If this is taken seriously, it means that your table becomes
just inline text, like the content of a paragraph. >>

This person describes exactly what I'm trying to do. I don't see the
words "not correct"; and I believe the spec says the usage is correct,
as well:

http://www.w3.org/TR/REC-CSS2/visur...propdef-display

But let's forget that, because none can doubt that the real standard of
correctness is the collection of browsers. It has to work in extant
browsers no matter what the spec says. If the usage doesn't work, then
that part of the spec is just pure gas and a waste of everybody's time
because the feature may not be used on the WWW any time in the next ten
years.

This person also said: << You would probably want to use float: left
instead. Or maybe positioning. >>

And you say: << Given the problems that Mozilla poses floating may be
the best way if the tables do not need to be centered, and if you know
how to avoid the drawbacks associated with floating. >>

Absolutely, no question. But I've killed myself trying to float these
tables and I haven't succeeded. As you say, I don't know how to avoid
the drawbacks associated with floating.

If you can point me to a site that tells these drawbacks, please do. If
you can tell me these drawbacks, please do. If there's a cookbook that
has a recipe for us all, tell me about it. I'm frustrated, I'm
desperate, and I'm listening.

Thanks for your response.

-- Pete

OT: You know, many of the cognoscenti evangelize for CSS-based layout.
But for the occasional, casual user there is always an insurmountable
gotcha' somewhere down the line with CSS. Always some roadblock that
will not yield. Always some useful feature in the spec that some
browser ignores or gets wrong. The hours wasted in trying to do
CSS-based layout make it a poor investment for anyone whose middle name
isn't Meyer. Or this person's.

Spartanicus

2005-01-26, 7:24 am

"Pete" <pete142@yahoo.com> wrote:

><< Apparently you missed that this person also told you that setting
>the display property of a table to "inline" is not correct. >>
>
>This person told me: << You seem to have set display: inline for your
>tables. If this is taken seriously, it means that your table becomes
>just inline text, like the content of a paragraph. >>
>
>This person describes exactly what I'm trying to do.

No he doesn't, disregarding the fact that to make the statement fully
correct tr and td would also have to be set to inline, having all
content within a table rendered inline is *not* what you want, you are
looking to have the table itself act as an inline element, but the
content in it to stay in tabular rendering.

>But let's forget that, because none can doubt that the real standard of
>correctness is the collection of browsers.

Bee shit.

>It has to work in extant
>browsers no matter what the spec says.

That's a different matter.

>If the usage doesn't work, then
>that part of the spec is just pure gas and a waste of everybody's time

Bee shit again.

>because the feature may not be used on the WWW any time in the next ten
>years.

Of course it can, how do you propose to get what you want in the many
browsers that *have* implemented this part of the spec (Opera, Safari,
iCab etc.)? The answer often is that you use the correct property value,
then you can attempt to work around the limitations of the relevant
browsers that have not implemented it.

>This person also said: << You would probably want to use float: left
>instead. Or maybe positioning. >>
>
>And you say: << Given the problems that Mozilla poses floating may be
>the best way if the tables do not need to be centered, and if you know
>how to avoid the drawbacks associated with floating. >>
>
>Absolutely, no question. But I've killed myself trying to float these
>tables and I haven't succeeded. As you say, I don't know how to avoid
>the drawbacks associated with floating.

http://www.spartanicus.utvinternet.ie/test/pete.htm

>OT: You know, many of the cognoscenti evangelize for CSS-based layout.
>But for the occasional, casual user there is always an insurmountable
>gotcha' somewhere down the line with CSS. Always some roadblock that
>will not yield. Always some useful feature in the spec that some
>browser ignores or gets wrong. The hours wasted in trying to do
>CSS-based layout make it a poor investment for anyone whose middle name
>isn't Meyer. Or this person's.

Using css for layout is indeed far to difficult given IE's and to a
lesser extent Mozilla's current limitations, this limits what can be
achieved in these browsers. There are work arounds for some of the
problems, but due to the fundamental unsuitability of the methods used
to work around the limitations of some browsers, they require a level of
understanding that is beyond the casual user. Although this is most
regrettable, it does not form an argument for ignoring css and the
numerous benefits it brings, especially for professional authors, or non
casual amateurs.

--
Spartanicus

Pete

2005-01-28, 7:42 pm

Spartanicus:

<< ... having all content within a table rendered inline is *not* what
you want, you are looking to have the table itself act as an inline
element, but the content in it to stay in tabular rendering. >>

Yes, of course you are right: that's what I was looking for. And so is
this:

<< http://www.spartanicus.utvinternet.ie/test/pete.htm >>

Beautiful! Exactly what I needed. Thank you so much! I'm very grateful
to you.

-- Pete