Re: rounded corners table (with wide angles)

Stephen Takacs <perlhaq (AT) gmail (DOT) com> wrote:

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

Spartanicus schrieb:

Stephen Takacs <perlhaq (AT) gmail (DOT) com> wrote:


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

I doubt that with table layout you will find a reliable solution even if
you manage to handle IEs strange colspan behavoiurs. Also your table
solution will have other disadvantages, read c.i.w.a.html and
c.i.w.a.stylesheets to find many discussions on table layouts.

I'd suggest trying a different approach, such as nesting divs for border
and corners, and using the table for the table data only, something like
the following (not tested):

-- Style section: --
div#container1 {
border:3px solid blue;
background-color:white;
background-image:url(upperleftcorner.gif);
background-repeat:no-repeat;
background-position:top left;
}
div#container2 {
background-image:url(bottomrightcorner.gif);
background-repeat:no-repeat;
background-position:bottom right;
}
div#container2 table {
margin:35px;
}

-- HTML section: --
<div id="container1">
<div id="container2">
<table>
....
</table>
</div>
</div>

HTH
Markus

On 2006-08-15, Spartanicus <invalid (AT) invalid (DOT) invalid> wrote:

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?

No, but for right now the table border is set to "1" so that it's easy
to tell exactly how each column is being rendered. Ultimately that
switch is going to get turned off.

The only thing that concerns me is IE6's rendition of columns 2 and 8,
which are too wide unless I explicitely define a width for each and
every single cell in the table. And I can do that, but it just feels
kludgy. Maybe that's the only way though.

--
Stephen Takacs <perlhaq (AT) gmail (DOT) com> http://perlguru.net/
4149 FD56 D078 C988 9027 1EB4 04CC F80F 72CB 09DA

Stephen Takacs <perlhaq (AT) gmail (DOT) com> wrote:

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?

No, but for right now the table border is set to "1" so that it's easy
to tell exactly how each column is being rendered. Ultimately that
switch is going to get turned off.

Then what are you aiming for?

If it's just 2 rounded corners then there are countless examples on the
web showing how to do that with proper markup and CSS, all you have to
do is google.

The only thing that concerns me is IE6's rendition of columns 2 and 8,
which are too wide unless I explicitely define a width for each and
every single cell in the table. And I can do that, but it just feels
kludgy. Maybe that's the only way though.

I doubt if anyone here is going to be able to help with presentational
HTML coding, that's something most have left behind long ago.

--
Spartanicus

On 2006-08-15, Spartanicus <invalid (AT) invalid (DOT) invalid> wrote:

Then what are you aiming for?

If it's just 2 rounded corners then there are countless examples on the
web showing how to do that with proper markup and CSS, all you have to
do is google.

That's true, but each and every tutorial I've managed to come accross
has tables with narrow-angled corners. For this particular project they
want the table rendered very precisely, in fact exactly like Firefox
renders it in that screenshot, including the wide angled curves which
each take up three cells. Simply having one cell for each corner
doesn't work, because it creates too much gap between the top/bottom
table borders and the first/last cell rows.

I will try Markus' suggestion today when I get over to the site, and
after I drink some coffee. ;-) I hope it works otherwise I'm just
hardcoding everything. Web design isn't my world, I'm a software
developer who somehow got hijacked into this and I'm trying to do it the
least kludy way possible while adhering to the mandated specifications.

--
Stephen Takacs <perlhaq (AT) gmail (DOT) com> http://perlguru.net/
4149 FD56 D078 C988 9027 1EB4 04CC F80F 72CB 09DA

Stephen Takacs <perlhaq (AT) gmail (DOT) com> wrote:

Then what are you aiming for?

If it's just 2 rounded corners then there are countless examples on the
web showing how to do that with proper markup and CSS, all you have to
do is google.

That's true, but each and every tutorial I've managed to come accross
has tables with narrow-angled corners. For this particular project they
want the table rendered very precisely, in fact exactly like Firefox
renders it in that screenshot, including the wide angled curves which
each take up three cells. Simply having one cell for each corner
doesn't work, because it creates too much gap between the top/bottom
table borders and the first/last cell rows.

Initially I was thrown by your screenshot, I thought that the numbers in
the cells were content, but I now suspect that they are merely there to
help you figure out that hideous half presentational, half data table.

If so then your problem seems to be that you are locked solid in a 1995
presentational coding mindset. Any of the proper CSS round border
solutions should be easily adaptable to do what you want.

A rough demo http://homepage.ntlworld.ie/spartanicus/temp.htm
It uses small radius corners that I had lying around, but they can be
enlarged to any size you want (with appropriate adjustments in the CSS).

--
Spartanicus

Spartanicus schrieb:

A rough demo http://homepage.ntlworld.ie/spartanicus/temp.htm

Nice! Just for interest: Is there a special reason you use the i element
for the borders?

--
Markus

Markus Ernst schrieb:

Spartanicus schrieb:


A rough demo http://homepage.ntlworld.ie/spartanicus/temp.htm


Nice! Just for interest: Is there a special reason you use the i element
for the borders?

I meant for the corners...

Markus Ernst <derernst@NO#SP#AMgmx.ch> wrote:

A rough demo http://homepage.ntlworld.ie/spartanicus/temp.htm

Nice! Just for interest: Is there a special reason you use the i element
for the borders?

Doing my bit to save the world's byte resources from running out.

<i> = 3 byte
<div> = 5 byte
<span> = 6 byte

All are non semantic and suitable for presentational purposes.

--
Spartanicus

In article <1oq2e29ajopiakti12tndp4th7cmm78m0h (AT) 4ax (DOT) com>,
Spartanicus <invalid (AT) invalid (DOT) invalid> wrote:

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

Actually his method has nothing to do with CSS; he's trying to
display rounded corner graphics directly in table cells. His
problem appears to be related to differences in how IE and Firefox
size the table cells.

However, what he wants can be done with a CSS container, inside
which he puts his table. Of course, using CSS introduces a whole
host of other browser incompatibilities.

-A