5x5 rounded-corner table

[MRe]

Hi,

[short]

Trying to get a 5x5 cell table to have variable size along middle
row/column and fixed size along all other rows/columns, but instead am
getting variable size in second and second-last rows/columns. Middle
3x3 cells span as 1 cell. Example code at the end of message..

[long]

I'm using tables to get a rounded-corner look by putting images in
each of the cells. I can get this working fine in a 3x3 table, but I
want to use very big rounded corners. In a 3x3 table this means huge
borders.

What I want to do is a 5x5 table. This allows me to break the corner
image across multiple cells (removing the redundant space), and means
I have 3x3 cells for body, maximizing the amount of space I can use
for content.

When I attempt this however, I can't get the middle row/column to
stretch to fill the space, instead, the second and second-last rows/
columns stretch evenly to meet in the middle (hiding the middle row/
column).

Example code below..

Thank you for any help solving this..

Kind regards,
Eliott

~~ example ~~
Here's what I've got..

<table>
<tr><td style="min-width:35px; min-height: 35px; max-width:35px; max-
height: 35px; width: 35px; height: 35px; background: url(inc/img/
mainborder_nw.png);"></td>
<td style="min-width:78px; min-height: 35px; max-width:78px; max-
height: 35px; width: 78px; height: 35px; background: url(inc/img/
mainborder_nwn.png);"></td>
<td style=" min-height: 35px; max-
height: 35px; height: 35px; background: url(inc/img/
mainborder_n.png) repeat-x;"></td>
<td style="min-width:78px; min-height: 35px; max-width:78px; max-
height: 35px; width: 78px; height: 35px; background: url(inc/img/
mainborder_nen.png);"></td>
<td style="min-width:35px; min-height: 35px; max-width:35px; max-
height: 35px; width: 35px; height: 35px; background: url(inc/img/
mainborder_ne.png);"></td>
</tr>
<tr><td style="min-width:35px; min-height: 78px; max-width:35px; max-
height: 78px; width: 35px; height: 78px; background: url(inc/img/
mainborder_wnw.png);"></td>
<td style="background: url(inc/img/mainborder.png) repeat;"
colspan="3" rowspan="3">
<p>jd lsajflsa jflkdajldkasjd lsajflsa jflkdajldkasjd lsajflsa
jflkdajldkasjd lsajflsa jflkdajldkas</p>
<p>jd lsajflsa jflkdajldkasjd lsajflsa jflkdajldkasjd lsajflsa
jflkdajldkasjd lsajflsa jflkdajldkas</p>
<p>jd lsajflsa jflkdajldkasjd lsajflsa jflkdajldkasjd lsajflsa
jflkdajldkasjd lsajflsa jflkdajldkas</p>
<p>jd lsajflsa jflkdajldkasjd lsajflsa jflkdajldkasjd lsajflsa
jflkdajldkasjd lsajflsa jflkdajldkas</p>
<p>jd lsajflsa jflkdajldkasjd lsajflsa jflkdajldkasjd lsajflsa
jflkdajldkasjd lsajflsa jflkdajldkas</p>
<p>jd lsajflsa jflkdajldkasjd lsajflsa jflkdajldkasjd lsajflsa
jflkdajldkasjd lsajflsa jflkdajldkas</p>
</td>
<td style="min-width:35px; min-height: 78px; max-width:35px; max-
height: 78px; width: 35px; height: 78px; background: url(inc/img/
mainborder_ene.png);"></td>
</tr>
<tr><td style="min-width:35px; max-width:35px; width: 35px;
background: url(inc/img/mainborder_w.png) repeat-y;"></td>
<td style="min-width:35px; max-width:35px; width: 35px; background:
url(inc/img/mainborder_e.png) repeat-y;"></td>
</tr>
<tr><td style="min-width:35px; min-height: 78px; max-width:35px; max-
height: 78px; width: 35px; height: 78px; background: url(inc/img/
mainborder_wsw.png);"></td>
<td style="min-width:35px; min-height: 78px; max-width:35px; max-
height: 78px; width: 35px; height: 78px; background: url(inc/img/
mainborder_ese.png);"></td>
</tr>
<tr><td style="min-width:35px; min-height: 35px; max-width:35px; max-
height: 35px; width: 35px; height: 35px;background: url(inc/img/
mainborder_sw.png);"></td>
<td style="min-width:78px; min-height: 35px; max-width:78px; max-
height: 35px; width: 78px; height: 35px;background: url(inc/img/
mainborder_sws.png);"></td>
<td style=" min-height: 35px; max-
height: 35px; height: 35px;background: url(inc/img/
mainborder_s.png) repeat-x;"></td>
<td style="min-width:78px; min-height: 35px; max-width:78px; max-
height: 35px; width: 78px; height: 35px;background: url(inc/img/
mainborder_ses.png);"></td>
<td style="min-width:35px; min-height: 35px; max-width:35px; max-
height: 35px; width: 35px; height: 35px;background: url(inc/img/
mainborder_se.png);"></td>
</tr>
</table>

 

[Adrienne Boswell]

Hi,

[short]

Trying to get a 5x5 cell table to have variable size along middle
row/column and fixed size along all other rows/columns, but instead am
getting variable size in second and second-last rows/columns. Middle
3x3 cells span as 1 cell. Example code at the end of message..

Please do not post markup. Post a URL with your latest efforts.

 

[MRe]

Please do not post markup.  Post a URL with your latest efforts.

Hi Adrienne,

Sorry for posting markup, but thank you for the solution! In making
up a minimal example page to host, I found it works as expected. There
is something else in my page causing the problem, heh.

Thank you,
Kind regards,
Eliott

 

[Adrienne Boswell]

Hi Adrienne,

Sorry for posting markup, but thank you for the solution! In making
up a minimal example page to host, I found it works as expected. There
is something else in my page causing the problem, heh.

Thank you,

Well, if you have other problems here's a few other things to do:
1. Validate your markup - a lot of times, you may have seen the same
markup error 50 times, but you just don't notice it. Machines do. So
validate markup [http://validator.w3.org], and CSS
[http://jigsaw.w3.org/css-validator/]
2. Make sure you are using the correct DocType
[http://www.w3.org/TR/html401/struct/global.html#version-info]
3. Come back here with a URL if you still have issues.

 

[dorayme]

Hi Adrienne,

Sorry for posting markup, but thank you for the solution! In making
up a minimal example page to host, I found it works as expected. There
is something else in my page causing the problem, heh.

Phew! I was mildly tempted but thought, fad, this unquestionably should
be a URL. And as I was thinking this, Adrienne suggested a URL. Often
the case that the discipline of making a public effort in a URL will
solve or at least sharpen the problem.

 

[Jan C. Faerber]

Please do not post markup.  Post a URL with your latest efforts.

Or you can post it like that: http://lua.pastey.net/126045
Paste it here http://lua.pastey.net/ and click 'paste'.

 

[MRe]

Or you can post it like that:http://lua.pastey.net/126045
Paste it herehttp://lua.pastey.net/and click 'paste'.

Ha, that's neat; adding that site to my favourites. Thank you

Kind regards,
Eliott

 

[nice.guy.nige]

Or you can post it like that: http://lua.pastey.net/126045
Paste it here http://lua.pastey.net/ and click 'paste'.

Interesting, although the big help with giving us a URL is that we can
see the HTML in action, rather than just the source code.

Cheers,
Nige

 

[Jan C. Faerber]

Interesting, although the big help with giving us a URL is that we can
see the HTML in action, rather than just the source code.

Cheers,
Nige

Yes, Mrs. Boswell was mentioning that probably because in
that code you miss the pics on your desktop and it would be
pretty much work to add some to get an impression of the page
( - not of the pic's content).
But e.g. php will not be shown in the source code in your browser.