LyleK
31 Jan 2006, 01:39 PM
Hi folks, new here. I've been using CSS with my current development project, and although mostly nice, it sometimes gets aggravating. Especially without a debugging tool. (Anybody know one?)
Here's an example. I'm displaying some tabular data, hence using a table. In fact I'm using two tables. Essentially I have a list of up to twelve items, and I'm showing them in two rows, but using completely separate tables. It looks pretty much like the top frame of this (http://www.veicon.com/test/Kiosk_screen_shot.png).
So, the first line should have a single-row table, followed by a right-arrow, centered vertically wrt the table. The second line should start with the right-arrow, followed by another table.
I only need it to work in IE6, but I'm checking it with Firefox too, to see if I'm following standards or just taking advantage of a quirk.
What's the right way to do this, with CSS, without resorting to using another table to hold everything? I need to get the arrows on the same line as the tables, but tables are like a div, and want to go on a line by themselves. I tried to set the style of the table to "display: inline;" or "display: table-inline;" but in Firefox this completely messes up the table - suddenly the table border is smaller than the cells!
So instead I set "float: left;" for the table in the first line, and "float: left;" for the arrow in the second line. That seems asymmetrical, but seems to work. It's not really semantically what I want - I want the table to be treated like a "big character" and just flow in the line.
Furthermore I can't make the arrow vertically centered wrt the table, except by adjusting the font size of the arrow.
Another annoying thing - I want to set the cell sizes using CSS, but both IE and Firefox ignore the width & height styles for td tags, instead only accepting the settings as attributes of the td tag. That violates XHTML 1.0 Strict, so I had to downgrade my page to XHTML 1.0 Transitional. :(
Here's (http://www.veicon.com/test/table_code_sample.html) a sample incarnation of the HTML, so you can look at it. Some of the stuff is filled in from a template (using Perl and HTML::Template). The resulting XHTML validates.
Thanks,
Lyle K.
Here's an example. I'm displaying some tabular data, hence using a table. In fact I'm using two tables. Essentially I have a list of up to twelve items, and I'm showing them in two rows, but using completely separate tables. It looks pretty much like the top frame of this (http://www.veicon.com/test/Kiosk_screen_shot.png).
So, the first line should have a single-row table, followed by a right-arrow, centered vertically wrt the table. The second line should start with the right-arrow, followed by another table.
I only need it to work in IE6, but I'm checking it with Firefox too, to see if I'm following standards or just taking advantage of a quirk.
What's the right way to do this, with CSS, without resorting to using another table to hold everything? I need to get the arrows on the same line as the tables, but tables are like a div, and want to go on a line by themselves. I tried to set the style of the table to "display: inline;" or "display: table-inline;" but in Firefox this completely messes up the table - suddenly the table border is smaller than the cells!
So instead I set "float: left;" for the table in the first line, and "float: left;" for the arrow in the second line. That seems asymmetrical, but seems to work. It's not really semantically what I want - I want the table to be treated like a "big character" and just flow in the line.
Furthermore I can't make the arrow vertically centered wrt the table, except by adjusting the font size of the arrow.
Another annoying thing - I want to set the cell sizes using CSS, but both IE and Firefox ignore the width & height styles for td tags, instead only accepting the settings as attributes of the td tag. That violates XHTML 1.0 Strict, so I had to downgrade my page to XHTML 1.0 Transitional. :(
Here's (http://www.veicon.com/test/table_code_sample.html) a sample incarnation of the HTML, so you can look at it. Some of the stuff is filled in from a template (using Perl and HTML::Template). The resulting XHTML validates.
Thanks,
Lyle K.