table problem in IE(of course)

UnrealEd · #1 (**permalink**) 08-31-06, 03:55 AM

Hi,
i recently started working with xml and css, and i found out that IE does not support the display:table option in css. Is there a way to work around this problem? without using html.

Here's the code i'm using at the moment. This is jsut an example of O'Reilly, the book i'm using to learn xml and css:
The xml page:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/css" href="example.css"?>
<dish>
	<ingredients>
		<ingredient>
			<quantity>1.5 teaspoon</quantity>
			<component>Flower</component>
		</ingredient>
		<ingredient>
			<quantity>2</quantity>
			<component>Eggs</component>
		</ingredient>
		<ingredient>
			<quantity>100g</quantity>
			<component>Sugar</component>
		</ingredient>
		<ingredient>
			<quantity>100g</quantity>
			<component>Butter</component>
		</ingredient>
	</ingredients>
	
	<recepy>
		<step>Mix the flower and eggs all together</step>
		<step>Melt the butter</step>
		<step>Mix the butter and the mixture of flower and eggs all together</step>
	</recepy>
</dish>

The css page:

Code:

dish{ font-family:Arial, Helvetica, sans-serif;
	font-size:small;
}
ingredients{ display: table;
			background-color:#CCFFCC;
			border-style:solid;
			border-color:#FF0000;
			border-width:1;
			margin-left:10pt;
			margin-top:20pt
}
ingredient{ display: table-row;
}
quantity, component{ display:table-cell;
			border-style:dashed;
			border-width:thin;
			border-color:#0099FF}

recepy{ display:block;
		margin-top:12pt;
		margin-left:10pt}
step{ display:list-item;
		list-style-type:none;
			list-style-position:inside;
			counter-increment: step;}
step:before{ content:counter(step)". ";}

This might look a little bit messy, but that's just because i've been messing around with this script, just to see what all the possibilities are.

Greetz and Thanx in advance,
UnrealEd

pkcidstudio · #2 (**permalink**) 08-31-06, 09:48 AM

this was from sitepoint article this morning, and is very easy to follow. sometimes you have to work around IE which is a pain. especially when it will coem to your footer.

Quote:

HTML Tables are not Evil

Sure, you can go to great lengths to reproduce the behaviour of tables using CSS, but sometimes tables are exactly what you should use.

Let's try this again. From Susan Douglas:

“I am currently on the fence between CSS and tables. […] How do I create columns in a list? For instance, a list of books with titles and authors. Or a list with edit and delete buttons. On a typewriter (or in Notepad) I would use tabs. I stick with tables because I can get it to line up the way I want.”

A list with columns—why, that sounds like the definition of a table to me! The choice to use CSS for page layout does not mean you should swear off ever using HTML tables. Information that is naturally presented using rows and columns (so-called tabular data) can and should be marked up using tables.

With this in mind, here's what your markup should look like:

<table>
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Author</th>
<th scope="col">Year</th>
</tr>
</thead>
<tbody>
<tr>
<td><cite>The JavaScript
Anthology</cite></td>
<td>James Edwards & Cameron Adams</td>
<td>2006</td>
</tr>
<tr>
<td><cite>The CSS Anthology</cite></td>
<td>Rachel Andrew</td>
<td>2005</td>
</tr>
<tr>
<td><cite>The PHP Anthology</cite></td>
<td>Harry Fuecks</td>
<td>2003</td>
</tr>
</tbody>
</table>

…which is just an HTML table—nothing fancy. Where CSS comes in is in presenting this table so that it looks like a list. First, we can the thead element, which contains the row of header cells:

thead {
display: none;
}

Depending on which browsers you need to support, there are better ways of doing this so that the content of the table headers is still seen by screen readers, but because the column structure of the data isn't especially important in this case we can get away with simply hiding them.

Next, we can style the book titles so that they look like a bulleted list:

cite {
display: list-item;
list-style-type: disc;
margin-left: 2em;
}

That's it! Way simpler than attempting to lay out the information without a table, as I did last issue, and the HTML table reinforces the meaning of the data to be displayed.

hope it helps.

UnrealEd · #3 (**permalink**) 09-01-06, 09:09 AM

thanx for the reply, but that's not really what i need:
this article is about converting a table into a list, and that's not what i want. I have to use the xml-tags (ingredients, ingredient, component and quantity, in this case) and make a table of it.

if i do this in Mozilla Firefox, everything works perfectly. But IE does not support the display:table option in css, to be more precisly: it isn't display table rows. it creates the table, but all data that should be spread over rows are listed in 1 row.

the reason why i'm not using html, is because i'm learning a little bit about xml.
If there's no sollution for the table problem, i will switch to xslt to transform my xml into html. But first, i wonna give css a try.

thanx,
UnrealEd