XML/CSS - using column-span does not work

[ricky]

Hello,

If anyone could help me with this I would highly appreciate it. I've
tried everything and nothing works. What I am trying to do is so damn
basic and it's just frustrating that it seems there's no support for
this. Either that or I'm doing something wrong. Well, enough venting,
here's what I need.

Using this sample XML file (test.xml):

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

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="test.css"?>
<CATALOGS>
<CATALOG>
<HEADER>
<NAME>Catalog A</NAME>
</HEADER>
<HEADER>
<COLUMN>Title</COLUMN>
<COLUMN>Artist</COLUMN>
<COLUMN>Country</COLUMN>
<COLUMN>Company</COLUMN>
<COLUMN>Price</COLUMN>
<COLUMN>Year</COLUMN>
</HEADER>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
</CATALOG>
<CATALOG>
<CATALOGS>
-----------------------------------------------------------------------------------

and this style sheet to format it (test.css):

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

CATALOG { display:table; column-count:6; width:500px;
border-color:#d3d3d3; border-style:solid; border-width:1px;
background-color:#ffffff; margin-left:20px; margin-top:20px; }
HEADER { display:table-row; background-color:#eeeeee; }
NAME { display:table-cell; column-span:6; font-family:Arial;
font-family:Arial; font-weight:bold; font-size:12px; padding:3px; }
COLUMN { display:table-cell; font-family:Arial; font-family:Arial;
font-weight:bold; font-size:12px; padding:3px; }
CD { display:table-row; font-family:Arial; font-size:12px;
color:#000000; }
TITLE { display:table-cell; padding:3px; }
ARTIST { display:table-cell; padding:3px; }
COUNTRY { display:table-cell; padding:3px; }
PRICE { display:table-cell; padding:3px; }
YEAR { display:table-cell; padding:3px; }

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

All I want is for the NAME to span across the 6 columns. The end
result should be the equivalent of the following HTML:

<table width="500" cellspacing="0" cellpadding="3"
style="border-color:#d3d3d3; border-style:solid; border-width:1px;">
<tr bgColor="#eeeeee">
<td colspan="6"><span style="font-family:Arial; font-size:12px;
font-weight:bold;">Catalog A</span></td>
</tr>
<tr bgColor="#eeeeee">
<td><span style="font-family:Arial; font-size:12px;
font-weight:bold;">Title</span></td>
<td><span style="font-family:Arial; font-size:12px;
font-weight:bold;">Artist</span></td>
<td><span style="font-family:Arial; font-size:12px;
font-weight:bold;">Country</span></td>
<td><span style="font-family:Arial; font-size:12px;
font-weight:bold;">Company</span></td>
<td><span style="font-family:Arial; font-size:12px;
font-weight:bold;">Price</span></td>
<td><span style="font-family:Arial; font-size:12px;
font-weight:bold;">Year</span></td>
</tr>
<tr>
<td><span style="font-family:Arial; font-size:12px;">Empire
Burlesque</span></td>
<td><span style="font-family:Arial; font-size:12px;">Bob
Dylan</span></td>
<td><span style="font-family:Arial; font-size:12px;">USA</span></td>
<td><span style="font-family:Arial;
font-size:12px;">Columbia</span></td>
<td><span style="font-family:Arial;
font-size:12px;">10.90</span></td>
<td><span style="font-family:Arial; font-size:12px;">1985</span></td>
</tr>
<tr>
<td><span style="font-family:Arial; font-size:12px;">Hide Your
Heart</span></td>
<td><span style="font-family:Arial; font-size:12px;">Bonnie
Tyler</span></td>
<td><span style="font-family:Arial; font-size:12px;">UK</span></td>
<td><span style="font-family:Arial; font-size:12px;">CBS
Records</span></td>
<td><span style="font-family:Arial; font-size:12px;">9.90</span></td>
<td><span style="font-family:Arial; font-size:12px;">1988</span></td>
</tr>
</table>
Now, what am I doing wrong? Why doesn't the column span with the TITLE
content span the 6 columns across like I want it to do using the
"column-span" property?

Seems so basic you'd think they'd have gotten it to work.

Using: Firefox 1.5 - don't bother looking at this in IE.

Again, any help would be appreciated.

Thank you,

Ricky

[David Dorward]

ricky wrote:

basic and it's just frustrating that it seems there's no support for
this. Why doesn't the column span with the TITLE content span the 6 columns
across like I want it to do using the "column-span" property?

I've found a reference to column-span in the 18 January 2001 Working Draft
for CSS3 module: Multi-column layout. The latest version of that module
(15th Dec 2005) is also a Working Draft, and *doesn't* include that
property.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[ricky]

Thank you for pointing that out. Although things would've been easier
using CSS, I have found that using XSL is more powerful and allows me
to do what I want. But seeing that column-span seems to be deprecated,
it would've forced my hand anyway.

Thanks again...your response is appreciated.

Ricky