grid structures: TABLE/TR/TD vs. DIV

"Alan J. Flavell" <flavell (AT) physics (DOT) gla.ac.uk> wrote:

On Tue, 2 May 2006, Steve Pugh wrote:

As for halving the amount of CSS. What did you have in mind? I
considered setting a default cell colour and the over riding that for
particular cells.

Something along those lines, indeed.

But as td+td matches the second and subsequent cells
that seemed to be a dead end.

The trick, as far as the rows is concerned, is to note that they all
start with a th.

So th+td matches precisely the first data cell,
th+td+td matches the second, and so on.

Cunning.

You get similar effects with the rows, however, so you need
some way to anchor the sectors which currently say tr+tr and so on.

tr:first-child+tr perhaps?

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 <steve (AT) pugh (DOT) net> wrote:

"Alan J. Flavell" <flavell (AT) physics (DOT) gla.ac.uk> wrote:
On Tue, 2 May 2006, Steve Pugh wrote:

As for halving the amount of CSS. What did you have in mind? I
considered setting a default cell colour and the over riding that for
particular cells.

Something along those lines, indeed.

But as td+td matches the second and subsequent cells
that seemed to be a dead end.

The trick, as far as the rows is concerned, is to note that they all
start with a th.

So th+td matches precisely the first data cell,
th+td+td matches the second, and so on.

Cunning.

You get similar effects with the rows, however, so you need
some way to anchor the sectors which currently say tr+tr and so on.

tr:first-child+tr perhaps?

Yep. http://steve.pugh.net/test/chessboard3.html

Still 'gross' though.

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

"Wÿrm" <nomailstodragon (AT) north (DOT) invalid> wrote

phil-news-nospam (AT) ipal (DOT) net> kirjoitti
viestissä:e33or8111ca (AT) news1 (DOT) newsguy.com...

snip

For another issue with CSS, take a block of text in a _single_ DIV
element
and using CSS only, style that block so it appears with a drop shadow
effect
without changing the HTML at all.

http://www.kolumbus.fi/ace/ng/box.html

Div with heading and paragraph of text inside. If you add more paragraphs
it needs tweaking though.

There are two ways of doing this.

The first is the ideal way - but doesn't work in anything due to the use of
:first-child

..mybox
{
width: 200px;
background-color: #c0c0c0;
color: #000000;
margin-bottom: 10px;
}

..mybox > *
{
background-color: #ffffff;
color: inherit;
border: 1px solid #000000;
border-top: none;
position: relative;
top: -4px;
left: -4px;
margin: 0;
padding: 0;
}

..mybox:first-child
{
background-color: #e0e0ff;
border-top: 1px solid #000000;
color: inherit;
}

The second version will work in firefox fine (certainly 1.5, not sure about
1.0), but still not in IE6 (not sure about IE7)

..mybox
{
width: 200px;
background-color: #c0c0c0;
color: #000000;
margin-bottom: 10px;
}

..mybox > *
{
background-color: #e0e0ff;
color: inherit;
border: 1px solid #000000;
position: relative;
top: -4px;
left: -4px;
margin: 0;
padding: 0;
}

..mybox > * + *
{
border-top: none;
background-color: #ffffff;
color: inherit;
}

Still, I think the original link is the best cross browser method available
at the moment, but I just wanted to show how things might be in the brighter
future. :-)

ME

"Alan J. Flavell" <flavell (AT) physics (DOT) gla.ac.uk> wrote

Now, here's something odd that I pondered on:

Unicode has two sets of chess pieces, called "white" and "black".
See the set at e.g
http://ppewww.ph.gla.ac.uk/~flavell/...a26.html#x2654
(assuming you have a capable font).

If you exhibit them on a black background, they disappear (not
surprisingly).

If you style a "black" one white, on a black background, then it
looks like a white piece.

Which leaves only the "white" one, styled white, to represent the
black piece on a black background.

http://ppewww.ph.gla.ac.uk/~flavell/tests/chessfun.html

This would surely be confusing content with presentation ;-)

I can't see those characters in my browser (firefox 1.5 on windows server
2003). I just get question marks instead. Is there a way to fix that - eg.
changing fonts?

Anyway, one way round this problem I would think would be to use spans or
divs to contain the chess pieces, and use css content. I would expect it to
work in firefox. I you were able to turn than into an example page showing
all the chess pieces on the chess board in starting places I'd be pretty
impressed.

eg.

_html_

<td><div class="black king"></div></td>

_style (I am only using round brackets () to denote shorthand)_

black king {content: '♚'}

(css for a black square) > black king {content: '♔'; colour: white}

On Tue, 2 May 2006, Martin Eyles wrote:

[...]

http://ppewww.ph.gla.ac.uk/~flavell/tests/chessfun.html

This would surely be confusing content with presentation ;-)

I can't see those characters in my browser (firefox 1.5 on windows
server 2003). I just get question marks instead. Is there a way to
fix that - eg. changing fonts?

If you have MS Office, or other eligible application, then it's worth
installing Arial Unicode MS from it. SIL Viewglyph, at any rate,
tells me that the glyphs are present there. AFAIK this font still does
not come free with any bare OS, but many MS products have it included.

The glyphs are also present in the shareware unicode font "Code2000"
which a web search should easily find.

Unfortunately I don't really know how to ask the Windows font system
the question "which of my installed fonts contain this specific
Unicode character?". I only know how to browse a given font (e.g with
SIL Viewglyph) and see whether it does or not. At any rate, "Lucida
Sans Unicode", which has a fair character repertoire, and comes as
standard with current Windows OSes, does not contain the chess pieces
(though it does contain the four card suits, in black - U+2660, 3, 5
and 6).

I found, incidentally, that installing Japanese language support (even
though I can't read it) had the side effect of considerably improving
my coverage of mathematical operators and various other symbols.
See e.g http://www.alanwood.net/unicode/fontsbyrange.html#u2600
which may explain it - Windows is presumably installing extra fonts
which just /happen/ also to have improved symbol repertoires.

Anyway, one way round this problem I would think would be to use
spans or divs to contain the chess pieces, and use css content. I
would expect it to work in firefox. I you were able to turn than
into an example page showing all the chess pieces on the chess board
in starting places I'd be pretty impressed.

So would I - but it would be an even *worse* example of confuddling
content with presentation!

cheers

--

The only problem I had with MSN messenger was finding out how to turn it
off. Once that was accomplished, I was a lot happier. - Chris Tolley

On Tue, 02 May 2006 11:46:58 +0100 Chris Sharman <chris.sharman (AT) sorry (DOT) nospam> wrote:

This is a fairly pathological example in any case. It's more common in
my experience to want to colour rows or columns, enabling the classes to
be moved out to tr or col, for more concise html.

The more common problem I see is in so many examples available online,
the CSS must be coded for a specific number of rows or columns. What
I want is CSS that works just fine regardless of how many rows and/or
columns there are.

And I want CSS that lets me do hover bouncing drop shadows without having
to change the markup to accomodate it. The problem is, all examples I
have seen show extra DIV or other elements added to prove a mechanism to
implement the visual effect style. IMHO, whatever style I want to do
should be appliable to exactly a single element in the markup (for each
such element to which it applies, of course).

I was just looking at online examples of rounded corners. Ewww, more
horrors with large images and size limitations. But I need to spend some
time on trying to better innovate that myself, first, before I say it is
a CSS problem.

--
-----------------------------------------------------------------------------

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

On Tue, 02 May 2006 13:31:07 +0100 Steve Pugh <steve (AT) pugh (DOT) net> wrote:

"Alan J. Flavell" <flavell (AT) physics (DOT) gla.ac.uk> wrote:
On Tue, 2 May 2006, Chris Sharman wrote:

I agree, it's gross.

Yes, but I found it quite entertaining. I suspect that it's possible
to halve the quantity of CSS without having to work too hard, but
it's still gross..

Hmm, how insulted should I be by everyone calling it gross? :-o

It's not an insult. Lots of my (developed long ago) HTML is certainly
quite gross, and recognized as such even back then. I'm looking for
CSS methods to do what I've done in the past in purely HTML, with the
requirement that the end results be at least just as good. I'm not
willing to take even one tiny step backwards to achieve results since
I know I can step back to the (ugly and gross) HTML and still have it.

If your example is gross, but turns out to be the only way to make it
work, then it's a go, anyway. But if there's a better way, we ought
try to find it.

It was a quickly thrown together demo to show that even with the
highly artificial constraint of only setting a class on the table
element CSS could do what was being asked. In reality I would use more
classes and dream about the days when CSS3 :nth-child selectors are
supported.

Turns out the chess board example was a bad example to begin with.
I should try to think up something else.

But today, I'm playing with rounded corners and seeing what I can do to
get them working in CSS as well as I had them working in just HTML.
Google found me plenty of online examples, but so far all of them seem
to be using elongated images ... e.g. images that include a stretch of
the sides as well, for at least some of them. Some strategies differ,
but it all seems to be yet another case of the stylesheets having to
specify some of the mechanics of layout to achieve a style result.
In other words, I still have to add extra elements to the markup as
the hooks CSS needs.

I think maybe tables will work (in a simpler way, of course) to do this
with CSS as well.

--
-----------------------------------------------------------------------------

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

On Tue, 02 May 2006 09:54:54 +0200 Johannes Koch <koch (AT) w3development (DOT) de> wrote:

phil-news-nospam (AT) ipal (DOT) net wrote:
On Tue, 2 May 2006 00:49:04 +0300 "W?rm" <nomailstodragon (AT) north (DOT) invalid> wrote:
| If it's tabular data, use table. It's that simple.

I cannot say that it _is_ tabular data. I can say that it needs the
same _behaviour_ as tabular data.

Then the HTML table elements would not be appropriate. But you could use
the CSS table stuff. Don't blame CSS for not offering presentation
characteristics you need, when in fact it's some user agent(s) that
lack(s) implementation.

Why would there be 2 different non-depricated mechanisms in the standards
that accomplish exactly the same thing?

"A table of numbers from a spread sheet"
"A table of images" (note, NOT use of tables to mosaic the images together)
"A table of whatever stuff you want to have a table of"

I don't see why different mechanisms have to be used when the concept of
how it is organized is the same regardless of the contents.

I'll use what works. When I want to get a web site done, I'm not going
to be a standards purist when the implementations aren't keeping up.
The "web standards" community for years did little or nothing to help
get browsers usable so the new standards could even be widely used.
Netscape went all to hell in version 4 and until Firefox 1.5, there was
plenty of reason to stay behind in browsers (and for plenty of reasons
beyond the scope of compliance with standards). I asked certain people
who were prominant in the "web standards" community to help by pushing
hard (in a public way) to get browsers fixed. But instead, all they
would do is stress how important web standards were. And that turned
a lot of people off.

Blaming CSS would not be right if the standards provide for a way to do
regardless of what implementations may or may not. Of course it would
be nice to have a list of what features don't work (or work wrong) in
which browsers.

Firefox is available for the major platforms. IE is not. If I have to
tell someone to use another browser, it's going to be Firefox. At least
I now have that option. So the big question is, how well does Firefox
implement CSS? It seems to be working fairly well. Who has IE7 to show
and tell?

--
-----------------------------------------------------------------------------

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

On Tue, 2 May 2006 13:27:39 +0300 "W?rm" <nomailstodragon (AT) north (DOT) invalid> wrote:

So DIV with heading and list of links, three columns split in 3 divs
floated, and in each column those div boxes with heading + list of links...

How to keep the columns from floating down to the bottom when the window
is narrower?

--
-----------------------------------------------------------------------------

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

On Tue, 02 May 2006 22:25:17 +0200 Johannes Koch <koch (AT) w3development (DOT) de> wrote:

phil-news-nospam (AT) ipal (DOT) net wrote:
On Tue, 02 May 2006 09:54:54 +0200 Johannes Koch <koch (AT) w3development (DOT) de> wrote:
| Then the HTML table elements would not be appropriate. But you could use
| the CSS table stuff. Don't blame CSS for not offering presentation
| characteristics you need, when in fact it's some user agent(s) that
| lack(s) implementation.

Why would there be 2 different non-depricated mechanisms in the standards
that accomplish exactly the same thing?

Because they are two different things: One (HTML tables) is markup for
tabular data. E.g. it includes the "Table rendering by non-visual user
agents" (HTML 4.01, section 11.4). The other (CSS table presentation
model) is just for presenting content in a certain way (a grid).

So why not use the CSS table presentation model for the tubular data?
Or is there some difference in the exact semantics of these methods?
Why have two mechanisms that work the same way?

--
-----------------------------------------------------------------------------

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------