Click here to get back home

rounded corners table (with wide angles)

 HomeNewsGroups | Search | About
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
rounded corners table (with wide angles) Stephen Takacs 08-14-2006
Posted by Stephen Takacs on August 14, 2006, 11:03 pm
Please log in for more thread options


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"></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"></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"></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"></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>

--
4149 FD56 D078 C988 9027 1EB4 04CC F80F 72CB 09DA

Posted by Spartanicus on August 15, 2006, 2:46 am
Please log in for more thread options



>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

Similar ThreadsPosted
Rounded Corners September 2, 2007, 8:49 am
TRANSPARENT rounded corners with shadow June 12, 2006, 7:38 pm
Round table corners May 31, 2006, 10:00 pm
Any way to tell a table to go "as wide as necessary"? March 14, 2005, 5:02 pm
two images i corners December 11, 2004, 4:04 pm
Rounded Box using a tabel January 29, 2007, 2:09 am
Wide, Wide Web December 27, 2004, 1:19 pm
y axis for wide graphs June 30, 2006, 5:43 pm
Large picture makes site too wide. July 23, 2008, 2:01 pm
How do I adjust html programming for wide screen monitors? - widescreen.JPG (0/1) February 8, 2007, 4:57 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap