CSS2 -- display:table-column question

I've been looking at using display:table-* to achieve certain layout
requirements and I've stumbled onto a problem. The spec says that
table-column doesn't display but it should be useful because it will
contain attributes that will affect the table. However, it doesn't say
what those attributes are. The spec also implies that if you have a
colspan attribute on an element with display:table-cell you will do a
colspan. 
 
My problem is that this doesn't really seem to work for me. I have the
following:
 
<form>
 <div class="instructions"><p>some instructions</p></div>
 <div class="entry"><label>This is a field</label><input type="text"
/></div> 
 <div class="entry"><label>This is a field</label><input type="text"
/></div> 
 <div class="entry"><label>This is a field</label><input type="text"
/></div> 
 <div class="entry"><label>This is a field</label><input type="text"
/></div> 
 <div class="entry"><label>This is a field</label><input type="text"
/></div>
 <div
class="submit"><button>Continue</button><button>Cancel</button></div>
</form>
 
The css I wan to put in there is:
form{
display:table;
}
form .instructions{
 display:table-row;
 width:auto;
}
form div.required{
display:table-row;
}
form div.required label{
display:table-cell;
font-weight:bolder;
width:180px;
}
form div.required input  {
display:table-cell;
width:auto;
}
form div.required .input  {
width:auto;
display:table-cell;
}
form div.required .input input{
width:auto;
display:inline;
}
form div.required .input label{
display:inline;
width:auto;
}

 
However, this causes problems for me with the instruction block (which
will almost always cover several lines). It is only ever one cell wide.
I need it to span two cells. However, I can't add a colspan to my div
since its not valid HTML. I can't find any way to set the colspan in
css. I also can't figure out how you would say which argument should be
used for colspan  (a real problem if your valid XML doesn't include the
colspan). 
 
I'm also not sure how to handle the  <div class="submit"> which I want
to be in line with the form fields. Could you do the following:
 
form div.submit{
display:table-row;
}
 
form div.submit button:first-child:before{
display:table-cell;
content:"";
}
 
or perhaps
 
form div.submit{
display:table-cell;
}
 
form div.submit:before{
display:table-cell;
content:"";
}
 
Any ideas?

H. Adam van den Hoven

Web Developer

Credit Union Central of BC

p 604 7306380

e avandenhoven@cucbc.com

 

Received on Wednesday, 28 August 2002 00:36:34 UTC