rounded corners table (with wide angles)

[Stephen Takacs]

I've been reading lots of rounded corners table tutorials lately,
because I'm a Perl guru, not an HTML guru. :-) So far all of the
examples I've seen have edges with narrow angles, which fit easily into
a single corner cell. Simple stuff. Piece of cake. By now I can do
them in my sleep while juggling hippopotamuses and hanging upside down.

But this one is different. In this particular case, it takes three
corner edges to hold each curve (not two, not four, and five is right
out!) Each one of those cells is 35x35 pixels, and that is exactly how
much room I allocate for them in the table. Then I let the browser
decide on the size of the other cells, based on its current width. But
lo and behold, the results are not pretty:
http://perlguru.net/misc/ex3.htm

As you can see, Firefox renders the table perfectly, while IE6 does its
own thing and disregards my 35-pixel width for columns 2 and 8. The
weird thing is that the problem basically goes away if I specify a width
(in pixels) for each and every single cell in the table. But how lame
is that? Now you have a table that's hardcoded and doesn't change its
size in sync with the browser.

So my question to you is whether or not there's a way around this
madness? I'm aware that IE7 and Firefox have built-in support for
rounded corners in CSS which might be applicable here, but alas I must
be able to support older browsers...

This is the HTML for the table in question. It's ugly, and it certainly
needs cleaning up and CSS'ing, but it's otherwise working code.

<table width=99% border="1" cellpadding=0 cellspacing=0>
<tr>
<td width=35 height=35 background="tlc.gif">1<img src="blank.gif"></td>
<td width=35 height=35 background="tlr.gif">2<img src="blank.gif"></td>
<td colspan=1 height=35 background="tb.gif">3<img src="blank.gif"></td>
<td colspan=3 height=35 background="tb.gif">456<img src="blank.gif"></td>
<td colspan=1 height=35 background="tb.gif">7<img src="blank.gif"></td>
<td width=35 height=35 background="trl.gif">8<img src="blank.gif"></td>
<td width=35 height=35 background="trc.gif">9<img src="blank.gif"></td>
</tr>
<tr>
<td width=35 height=35 background="tll.gif"><img src="blank.gif"></td>
<td colspan=2 align="right" background="cell.gif">IC Number:&nbsp;</td>
<td align="center" valign="middle" background="cell.gif">{STOCK_NO}</td>
<td width=31 background="vb.gif"><img src="blank.gif"></td>
<td align="right" background="cell.gif">Serial Number:&nbsp;</td>
<td colspan=2 align="center" valign="middle" background="cell.gif">{SERIAL_NUMBER}</td>
<td width=35 background="trr.gif"><img src="blank.gif"></td>
</tr>
<tr>
<td width=35 height=35 background="lb.gif"><img src="blank.gif"></td>
<td colspan=2 align="right">IC Number:&nbsp;</td>
<td align="center" valign="middle">{STOCK_NO}</td>
<td width=31 background="vb.gif"><img src="blank.gif"></td>
<td align="right">Serial Number:&nbsp;</td>
<td colspan=2 align="center" valign="middle">{SERIAL_NUMBER}</td>
<td width=35 background="brr.gif"><img src="blank.gif"></td>
</tr>
<tr>
<td width=35 height=35 background="blc.gif"><img src="blank.gif"></td>
<td width=35 height=35 background="blr.gif"><img src="blank.gif"></td>
<td colspan=1 height=35 background="bb.gif"><img src="blank.gif"></td>
<td colspan=3 height=35 background="bb.gif"><img src="blank.gif"></td>
<td colspan=1 height=35 background="bb.gif"><img src="blank.gif"></td>
<td width=35 height=35 background="brl.gif"><img src="blank.gif"></td>
<td width=35 height=35 background="brc.gif"><img src="blank.gif"></td>
</tr>
</table>

--
Stephen Takacs <pe*****@gmail.com http://perlguru.net/
4149 FD56 D078 C988 9027 1EB4 04CC F80F 72CB 09DA

[Spartanicus]

Stephen Takacs <pe*****@gmail.comwrote:

>I've been reading lots of rounded corners table tutorials lately,
because I'm a Perl guru, not an HTML guru. :-)

Rounded corners are styling, this question belongs in
news:comp.infosystems.www.authoring.stylesheets
crossposted and follow-up set

>So far all of the
examples I've seen have edges with narrow angles, which fit easily into
a single corner cell. Simple stuff. Piece of cake. By now I can do
them in my sleep while juggling hippopotamuses and hanging upside down.

But this one is different. In this particular case, it takes three
corner edges to hold each curve (not two, not four, and five is right
out!) Each one of those cells is 35x35 pixels, and that is exactly how
much room I allocate for them in the table. Then I let the browser
decide on the size of the other cells, based on its current width. But
lo and behold, the results are not pretty:
http://perlguru.net/misc/ex3.htm

That page seems to contain nothing more than a screenshot
http://perlhaq.50webs.com/misc/ex3.png

>As you can see, Firefox renders the table perfectly

If so then its an unusual effect you are aiming for, do you really want
solid cell borders to show with a rounded border rendered inside the
table?

--
Spartanicus