Hello all -

I'm working on a site that has a survey page for users. I'm fairly new
to css, but I want to use it for layout.

In the page, the user has a a set of radio buttons, five of them, to
pick from. What I want is a center-aligned table layout, with the top
row being the titles of each radio button, and the bottom row being
the radio buttons. Each cell would be the same width.

If I were formatting this using html, I would simply use the table
tags. But, I'm trying to do this using pure css. I have a css layout
that properly center-align and evenly space my radio buttons and their
titles in IE 6, but in firefox, they are left-aligned.

All of the css tutorials that I've looked at so far talk about getting
text to flow around an image, or right- and left- aligning various
navigation features. I haven't found a tutorial about center-aligning
html elements, evenly spacing them, etc. Basically I want to emulate
features of the <table> tags.

Now I know some purists bristle at the suggestion that one call
something a 'table' when it's not a table of data. Please keep in mind
that when I say table, I'm talking about the 2-dimensional structure
of the layout, not the abstract concept of a dataset with columns and
rows. Yes, I am misappropriating the table tags.

Thank you!

lawpoop@gmail.com wrote:
>
> I have a css layout
> that properly center-align and evenly space my radio buttons and their
> titles in IE 6, but in firefox, they are left-aligned.

Post a URL so we can see what you have done. Do not post code.

--
Berg

On Mar 11, 6:58 pm, Bergamot <berga...@visi.com> wrote:
> Post a URL so we can see what you have done. Do not post code.

Berg, thanks for taking the time to look at this. Here is the URL
( sorry for the delay in response):

http://nerdcraft.net/survey.html

I have the grid of 1-5 questions and radio button answers layed out in
a table. I couldn't find a tutorial for a css grid, so I hacked it for
now. Ideally, I would like to have the question layout in css.

Problems with the progress bar:
In IE, the css progress bar is properly center aligned, but the
progress part is also center aligned within the bar , which is a
problem. The progress part should right left-aligned.

In firefox, the progress area is properly left-aligned, but the whole
bar is left-aligned. I want it to be in the center.
Also, in firefox, the 'add comment' part is broken -- it extends the
content area down past the footer.

I'm thinking the progress bar would also be easier to do as a table,
with fixed pixel widths, instead of css.

lawpoop@gmail.com wrote:
> On Mar 11, 6:58 pm, Bergamot <berga...@visi.com> wrote:
>> Post a URL so we can see what you have done. Do not post code.
>
> http://nerdcraft.net/survey.html
>
> I have the grid of 1-5 questions and radio button answers layed out in
> a table. I couldn't find a tutorial for a css grid, so I hacked it for
> now. Ideally, I would like to have the question layout in css.

Why? the radio buttons look like tabular data to me. Use a table, except
don't use icky presentational HTML attributes, like align=center. Mixing
HTML and CSS styles will only make a mess, and a real PITA to maintain.
BTW, putting the radio buttons in a table doesn't mean the whole page
needs to be in a table.

And use a better doctype. The one in that test page triggers quirks
mode, which will not give consistent results across browsers as you've
already discovered. Use HTML 4.01 strict if you want the best compatibility.

> In firefox, the progress area is properly left-aligned, but the whole
> bar is left-aligned. I want it to be in the center.

Drop the align=center on that cell - that is for aligning text within
the block, not for aligning blocks themselves. Look up margin:auto

--
Berg

On Apr 12, 6:28 pm, Bergamot <berga...@visi.com> wrote:

> Why? the radio buttons look like tabular data to me. Use a table, except
> don't use icky presentational HTML attributes, like align=center. Mixing
> HTML and CSS styles will only make a mess, and a real PITA to maintain.
> BTW, putting the radio buttons in a table doesn't mean the whole page
> needs to be in a table.

So what exactly is the complaint people make about using table tags
for 'tabular data'? This certainly isn't a train schedule or a chart
in table format.
When they say 'tabular data', do they mean simply 'grid'?

Do the labels for the radio buttons also belong in the table? I'd
assume so; I can't imagine how you get them to line up with their
radio buttons without it.

> And use a better doctype. The one in that test page triggers quirks
> mode, which will not give consistent results across browsers as you've
> already discovered. Use HTML 4.01 strict if you want the best compatibility.
>
> > In firefox, the progress area is properly left-aligned, but the whole
> > bar is left-aligned. I want it to be in the center.
>
> Drop the align=center on that cell - that is for aligning text within
> the block, not for aligning blocks themselves. Look up margin:auto

Awesome! Thanks, Berg!

Or, let me ask a more general question: Is an html table an
appropriate way to align any set of elements of an HTML page that are
to be in a grid layout?

Or is there a pure css way to do a grid-style layout? Something where
you wanted, say, two rows and four columns of some elements, that all
have the same width and spacing distribution?

On 2008-04-13, lawpoop@gmail.com <lawpoop@gmail.com> wrote:
> Or, let me ask a more general question: Is an html table an
> appropriate way to align any set of elements of an HTML page that are
> to be in a grid layout?

Supposedly not. You're only meant to use an HTML table if there's
something abstractly tabular about the data independently of how it
might be displayed.

"Abstractly tabular" is a contrived idea since really a table is a kind
of presentation.

Perhaps a better criterion is whether the table layout is part of the
meaning of the data.

> Or is there a pure css way to do a grid-style layout? Something where
> you wanted, say, two rows and four columns of some elements, that all
> have the same width and spacing distribution?

Yes, you just put display: table, display: table-row, display:
table-cell etc. on the elements you want to be tables, rows and cells.
It should all work exactly the same (but with the added feature that you
can leave out bits of the structure and have it filled in for you in a
defined way). It doesn't work in IE.

lawpoop@gmail.com wrote:
> Or, let me ask a more general question: Is an html table an
> appropriate way to align any set of elements of an HTML page that are
> to be in a grid layout?

It depends on what you mean by "grid". A data grid has relationships
between rows and columns, and is tabular. If you're thinking of the
general design principle of grid layouts, that's not tabular. In your
case there was a direct relationship between the radio button and its
corresponding label, as well as the buttons as a group. Granted, it
could have been laid out various ways, but a table is not wrong for
this, IMO.

> Or is there a pure css way to do a grid-style layout? Something where
> you wanted, say, two rows and four columns of some elements, that all
> have the same width and spacing distribution?

There are plenty of CSS templates with varying numbers of columns.

--
Berg