Add Padding to cell depending on neighbor

[dvomsaal]

I seem to remember there is a way to modify an element based on what it
is next to, but I can't seem to locate it. Here's my scenario:

We have some pages that are built dynamically and present tabular data
(generally from a database). The generating application is smart
enough to use styles that left justify text (descriptions, etc.) and
right justify numbers (counts, dollars). However, if a right justified
column is smack up against a left justified column it is a little
difficult to read (we use a minimum of padding to maximize data on the
screen). I would love to define the style to add some padding in this
case. Is this possible?

Thanks a lot,

Daniel vom Saal

[Jukka K. Korpela]

dv******@ddrtech.com <dv******@ddrtech.comscripsit:

I seem to remember there is a way to modify an element based on what
it is next to,

You can use a contextual selector that selects an element according to the
element it follows, so that e.g. using the markup
... <td class="foo">...</td<td>stuff</td...
you could use the selector
td.foo + td
to select the "stuff" cell, since the selector matches any td element that
immediately follows another td element that has class="foo". The bad news is
that this doesn't work on IE 6. (It works on IE 7 beta.)

You can't do things in the opposite direction (to select an element
according to the element that follows it).

The generating application is smart
enough to use styles that left justify text (descriptions, etc.) and
right justify numbers (counts, dollars). However, if a right
justified column is smack up against a left justified column it is a
little difficult to read (we use a minimum of padding to maximize
data on the screen). I would love to define the style to add some
padding in this case. Is this possible?

It would be best if you could modify the generating application so that it
keeps track of what it has done and detects such a situation and emits a
class attribute that lets you specify the padding. That is, when it is about
to generate a cell that has left-aligned content, it checks whether the
previous cell on the same line was right-aligned and generates, say, <td
class="text padded"instead of just <td class="text">, and your CSS could
have something like
td.text { text-align: left; }
td.padded { padding-left: 0.2em; }

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[dvomsaal]

Jukka K. Korpela wrote:

You can use a contextual selector that selects an element according to the
element it follows, so that e.g. using the markup
... <td class="foo">...</td<td>stuff</td...
you could use the selector
td.foo + td
to select the "stuff" cell, since the selector matches any td element that
immediately follows another td element that has class="foo". The bad news is
that this doesn't work on IE 6. (It works on IE 7 beta.)

Sigh. Thank you Microsoft (again); our client base is almost 100% IE.

It would be best if you could modify the generating application so that it
keeps track of what it has done and detects such a situation and emits a
class attribute that lets you specify the padding.

Sounds like that's what we'll have to do. Thanks for your reply; based
on the history of posts in this group I think I can take this as
gospel!

DvS