How's this for cross-browser table positioning?

[Curtis]

Recently we were considering how to set the position of
tables and some other elements simply and reliably
cross-browser. By "simply" I mean that it had to fit in a
single line of text applied to a single element--and we
wished to avoid deprecated HTML. (The most simple and
reliable things seem to be deprecated... sigh.)

This site does some cross-browser tests.

http://theodorakis.net/tablecentertest.html

The best solutions suggested are combinations of divs and
table-margin settings and the like, too messy for our needs,
which amount to using a macro in our markup language to set
table width and position.

While not as terse as "center" and the like, this seems to
work very well, the generated HTML being:

<table style="margin-left: 15%; margin-right: 15%; width:
70%;">

I've tested it on IE 5.0, 5.5, Firefox and Opera.

Any reason why we shouldn't stick with this syntax?

--

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to philosophical
thought.

 

[Toby Inkster]

<table style="margin-left: 15%; margin-right: 15%; width:
70%;">
Any reason why we shouldn't stick with this syntax?

Nope. Margins are the correct way to centre a block-level element. You can
abbreviate your example like this:

<table style="margin:0 15%;width:70%">

The following should also be equivalent:

<table style="margin:auto;width:70%">

but doesn't work in IE 5.x. It only saves one byte though, so margin:auto
probably isn't much use in this example -- it does however become useful
when you don't know the percentage width of the table. e.g.

<table style="margin:auto;width:15em">

 

[Curtis]

Nope. Margins are the correct way to centre a block-level element. You can
abbreviate your example like this:

<table style="margin:0 15%;width:70%">
The following should also be equivalent:

I'm afraid you lost me, Toby. You said no, then said margins
were the correct way.

<table style="margin:auto;width:70%">
but doesn't work in IE 5.x.

The whole point was the cross-browser compatibility, though.
Our website gets a lot of hits from IE 5.X users.

It only saves one byte though, so margin:auto
probably isn't much use in this example -- it does however become useful
when you don't know the percentage width of the table. e.g.

<table style="margin:auto;width:15em">

Margin auto works great for Firefox and Opera, but fails for
IE 5--I haven't tested on 6 yet, but no matter. If it fails
on 5, we won't use it.

---

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to philosophical
thought.

 

[Els]

I'm afraid you lost me, Toby. You said no, then said margins
were the correct way.

You asked a negative: 'any reason why we *shoudn't* ...'.

The whole point was the cross-browser compatibility, though.
Our website gets a lot of hits from IE 5.X users.


Margin auto works great for Firefox and Opera, but fails for
IE 5--I haven't tested on 6 yet, but no matter. If it fails
on 5, we won't use it.

I use both.
<div>
<table>....</table>
</div>

div{text-align:center;}
table{margin-auto;width:15em;text-align:left;}

Works cross-browser.

 

[Curtis]

You asked a negative: 'any reason why we *shoudn't* ...'.

Oops. Sure. Sorry I read that so hastily.

I use both.
<div>
<table>....</table>
</div>

div{text-align:center;}
table{margin-auto;width:15em;text-align:left;}

Works cross-browser.

IIRC, that's the approach taken in the link I cited.

It wouldn't work for us, though, because we're using this
CSS in a macro line we're feeding to a single element like a
table in our markup language. IOW, it needs to be a single
phrase which would normally be between { something;
something; something } on a CSS.

Many thanks to both you and Toby for the feedback!

--

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to philosophical
thought.

 

[Els]

IIRC, that's the approach taken in the link I cited.

Ah yes, sorry. I didn't actually read the OP, just your reply to
Toby...

It wouldn't work for us, though, because we're using this
CSS in a macro line we're feeding to a single element like a
table in our markup language. IOW, it needs to be a single
phrase which would normally be between { something;
something; something } on a CSS.

You can't just give the tables a standard
<div class="table-wrapper"><table> and </table></div>
code in the HTML?

Anyway, if it's important to have one-line macros and you don't want
to alter the HTML, I'd just forget about IE5.0. They would just have
non-centered tables, not a big problem ;-)

Many thanks to both you and Toby for the feedback!

np

 

[Curtis]

Curtis wrote:

You can't just give the tables a standard
<div class="table-wrapper"><table> and </table></div>
code in the HTML?

Simplicity is the key here. It would complicate things for a
user to have to send a div a styling line and a table
another styling line--what we're after is doing everything
in one line of description.

If we were just doing it using standard CSS there'd be no
problem, but the idea of a macro, of course, is to make a
few keystrokes mean a lot. I'd hate to have to parse
something in two directions.

Anyway, if it's important to have one-line macros and you don't want
to alter the HTML, I'd just forget about IE5.0. They would just have
non-centered tables, not a big problem ;-)

I'm having the same problem in both 5.0 and 5.5, which is no
small share of our website users. Anyhow, it would reflect
poorly on our product not to have SOME mode of positioning
that's at least 95% cross-browser compatible and still not a
kludge of div+table coding.

That's our golden dream, at any rate.

--

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to philosophical
thought.