Forcing table cells to stack vertically

By defining a style as follows:

@media aural, handheld {td.layout {display:block;}}

I'm hoping to linearise layout tables when viewed by screenreaders and
handheld devices (it is also be in some selectable user preferences).

This works as intended in Netscape 7 - all the cells stack vertically above
each other nicely, but not in Internet Explorer 6 where the only display
property that td will respond to seems to be 'none'.

I need to keep the layout tables for legacy reasons, is there any way of
doing this and using CSS to stack all the cells vertically in IE?

Thanks
Finn

"Finn Newick" <finn.newick (AT) menai (DOT) ac.uk> wrote:

By defining a style as follows:

@media aural, handheld {td.layout {display:block;}}

I'm hoping to linearise layout tables when viewed by screenreaders

Um, why? The above code will place the table cells one after the other
in the order they appear in the source code. Do you think that a
screenreader would do anything different by default?

and handheld devices

Handheld devices vary a great deal, some of the can cope with the same
sorts of layouts as deslktop computers, others are much more like text
browsers (which will usually linearise the table just like a
screenreader will), others are in between. Whether any of them support
media handheld is another matter.

(it is also be in some selectable user preferences).

Already built into some browsers (e.g. Opera) but this seems to be the
meat of your question, so let's proceed...

This works as intended in Netscape 7 - all the cells stack vertically above
each other nicely, but not in Internet Explorer 6 where the only display
property that td will respond to seems to be 'none'.

Yep, seems to be the case. IE is rubbish isn't it?

I need to keep the layout tables for legacy reasons, is there any way of
doing this and using CSS to stack all the cells vertically in IE?

I can't think of a pure CSS solution. You could use the DOM to
dynamically remove the table markup and replace it with divs. Or you
could take the height of the cells (again by querying the DOM) and use
that to generate absolutrely positioned co-ordinates for the cells.
Those options are a bit complicated and messy. I think you're out of
luck.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

Thanks for the reply (and apologies for the weird double posting).

I'm hoping to linearise layout tables when viewed by screenreaders

Um, why? The above code will place the table cells one after the other
in the order they appear in the source code. Do you think that a
screenreader would do anything different by default?

There are two types of screenreaders, ones which actually work a bit like
web browsers and will indeed linearise tables, and ones that are genuinely
reading the screen. Some of the latter can get confused with columns of text
adjacent to each other. Thankfully I think these are fairly rare now, but I
was hoping to give those visitors the option of adjusting the columns.

and handheld devices

Handheld devices vary a great deal, some of the can cope with the same
sorts of layouts as deslktop computers, others are much more like text
browsers (which will usually linearise the table just like a
screenreader will), others are in between. Whether any of them support
media handheld is another matter.

I'm be using a server generated CSS sheet for those browsers that don't
support aural (do any?) or handheld media statements so that users can
define how the page behaves (along with colours, font size etc).

(it is also be in some selectable user preferences).

Already built into some browsers (e.g. Opera) but this seems to be the
meat of your question, so let's proceed...

True, and I wish they all did!

This works as intended in Netscape 7 - all the cells stack vertically
above
each other nicely, but not in Internet Explorer 6 where the only display
property that td will respond to seems to be 'none'.

Yep, seems to be the case. IE is rubbish isn't it?

I need to keep the layout tables for legacy reasons, is there any way of
doing this and using CSS to stack all the cells vertically in IE?

I can't think of a pure CSS solution. You could use the DOM to
dynamically remove the table markup and replace it with divs. Or you
could take the height of the cells (again by querying the DOM) and use
that to generate absolutrely positioned co-ordinates for the cells.
Those options are a bit complicated and messy. I think you're out of
luck.

Yep, I'm hoping to avoid client-side scripting if at all possible. Oh well,
I will probably mangle the content that's forcing me to keep the table so
that I can wrap it in CSS or if all else fails do some more server side
sniffing and write out a table or CSS as appropriate.

Thanks again
Finn

Steve Pugh wrote:

I can't think of a pure CSS solution. You could use the DOM to
dynamically remove the table markup and replace it with divs.

Wow, I can strip markup based on stylesheet selection?
What do I read up on?

JustAnotherGuy <no-email (AT) sorry (DOT) com> wrote:

Steve Pugh wrote:

I can't think of a pure CSS solution. You could use the DOM to
dynamically remove the table markup and replace it with divs.

Wow, I can strip markup based on stylesheet selection?

Not simply.

CSS _can't_ strip markup.

JavaScript (or another scripting language, but let's assume JS for
now) can.

What triggers that JavaScript can vary widely.

Whether selecting an alternate (sic) stylesheet can be used as the
trigger is going to vary between browsers. I would expect it to be
possible in Mozilla but I doubt it's possible in Opera. Just guessing
off the top of my head.

IE, of course, doesn't support alternate stylesheets. So whatever
method you use to force the application of the "alternate" stylesheet
(either JS or a client side process) can also change your markup at
the same time.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

Steve Pugh wrote:

IE, of course, doesn't support alternate stylesheets. So whatever
method you use to force the application of the "alternate" stylesheet
(either JS or a client side process) can also change your markup at
the same time.

Steve

Yeah, thanks But I actually misphrased my question, I don't really
about the trigger being a stylesheet change. What client side process
can enable me to do that--select which tags (and the content inside
them) to remove then dynamically produce a page hence changed from its
original state? I was looking at XSLT but it doesn't seem to be what I'm
looking for.

JustAnotherGuy wrote:

Steve Pugh wrote:


IE, of course, doesn't support alternate stylesheets. So whatever
method you use to force the application of the "alternate" stylesheet
(either JS or a client side process) can also change your markup at
the same time.

Steve


Yeah, thanks But I actually misphrased my question, I don't really
about the trigger being a stylesheet change. What client side process
can enable me to do that--select which tags (and the content inside
them) to remove then dynamically produce a page hence changed from its
original state? I was looking at XSLT but it doesn't seem to be what I'm
looking for.

xposting to alt.html to try an NG for which this is more on-topic,

though not sure if I should be doing this or starting a new thread. Oh well.

I'm not sure where exactly would be on topic, but I'm looking for a
pointer (to a specific technology or process) more than anything else.