Stylesheets - Re: rounded corners table (with wide angles)

Author

Re: rounded corners table (with wide angles)

Spartanicus

2006-08-15, 3:33 am

Stephen Takacs <perlhaq@XXXXXXXXXX> 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

Markus Ernst

2006-08-15, 6:45 am

Spartanicus schrieb:[color=darkred]
> Stephen Takacs <perlhaq@XXXXXXXXXX> wrote:
>
>
>
>
> Rounded corners are styling, this question belongs in
> news:comp.infosystems.www.authoring.stylesheets
> crossposted and follow-up set
>
>
>
>
> That page seems to contain nothing more than a screenshot
> http://perlhaq.50webs.com/misc/ex3.png
>
>

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

Stephen Takacs

2006-08-15, 10:35 pm

On 2006-08-15, Spartanicus <invalid@invalid.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@XXXXXXXXXX> http://perlguru.net/
4149 FD56 D078 C988 9027 1EB4 04CC F80F 72CB 09DA

Spartanicus

2006-08-15, 10:35 pm

Stephen Takacs <perlhaq@XXXXXXXXXX> wrote:

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

Stephen Takacs

2006-08-15, 10:35 pm

On 2006-08-15, Spartanicus <invalid@invalid.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@XXXXXXXXXX> http://perlguru.net/
4149 FD56 D078 C988 9027 1EB4 04CC F80F 72CB 09DA

Markus Ernst

2006-08-15, 10:35 pm

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

2006-08-15, 10:35 pm

Markus Ernst schrieb:
> Spartanicus schrieb:
>
>
>
> Nice! Just for interest: Is there a special reason you use the i element
> for the borders?

I meant for the corners...

Spartanicus

2006-08-15, 10:35 pm

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

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

axlq

2006-08-15, 10:35 pm

In article <1oq2e29ajopiakti12tndp4th7cmm78m0h@4ax.com>,
Spartanicus <invalid@invalid.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