By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,492 Members | 1,987 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,492 IT Pros & Developers. It's quick & easy.

Rounded Box using a tabel

P: n/a
Hi!

I try to make a box with rounded corners. To achieve this I make a 3
times 3 table. The border (the outer TDs) shall have a width of 10px.
The inner TD shall be flexible. How would I write this, so it works on
all browsers? Or should I use another technique?
(I made this work on firefox already, but ie7 makes it hard for me. I
can't fix the height of a cell to exactly 10px.)

Thanks for your Help

Rudi
Jan 29 '07 #1
Share this Question
Share on Google+
7 Replies


P: n/a
Scripsit Rudi Hausmann:
I try to make a box with rounded corners. To achieve this I make a 3
times 3 table.
That's not what many people here regard as good practice, but the sad truth
is that a table approach is the only reasonable approach to this job at
present. Using div elements and CSS for the purpose just makes things more
difficult to create and understand and maintain.
The border (the outer TDs) shall have a width of 10px.
The inner TD shall be flexible. How would I write this, so it works on
all browsers? Or should I use another technique?
Use cellspacing="0" cellpadding="0" border="0" in the <tabletag, set
width="10" height="10" for the corner cells, don't set width and height for
the center cell, and use markup like
<td width="10" height="10"><img alt="" src="upper-left.gif" width="10"
height="10"></td>
for the corner cells, naturally using different images (which you have
probably created from one image using mirroring in an image processing
program).
(I made this work on firefox already, but ie7 makes it hard for me. I
can't fix the height of a cell to exactly 10px.)
As usual, a URL would help, but my guess is that you omitted either the
cellpadding="0" or the cellspacing="0" attribute or you have a space or line
break before a corner cell's </td>, thereby invoking a manifestation of the
infamous White Space Bug.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jan 29 '07 #2

P: n/a
On 2007-01-29, Rudi Hausmann <ru*****@nospam.comwrote:
Hi!

I try to make a box with rounded corners. To achieve this I make a 3
times 3 table. The border (the outer TDs) shall have a width of 10px.
The inner TD shall be flexible. How would I write this, so it works on
all browsers? Or should I use another technique?
(I made this work on firefox already, but ie7 makes it hard for me. I
can't fix the height of a cell to exactly 10px.)
An outside guess, since I have neither your exact example or IE7 to try
it on even if I did, but the problem may be related to baselines.

An img is inline by default, and if its vertical-align is the default
(baseline), it should sit on the row baseline as if it were a glyph, and
so the cell will be given a bit extra height below the baseline for
descenders in the current font, even if the img is the only thing in the
cell.

Firefox does a "quirks mode switch" here. If you put the proper doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

as the first line of your document you get the correct behaviour (gap
below the baseline). If you don't put a doctype, and the img is on its
own in the cell, Firefox will align its bottom edge to the bottom of the
cell.

But don't rely on quirks and quirks modes, always use the proper
doctype, and set either display:block or vertical-align:bottom on the
img in the table cell.

So something like this:

td img
{
display: block;
}
Jan 29 '07 #3

P: n/a
Thanks to everybody for your help. This is the table I produced so far
and which I couldn't make to run on IE7 up to now.

Here is the code:

<table border="0" cellpadding="0" cellspacing="0" style="height: 80%">
<colgroup>
<col width="10" />
<col width="1000" />
<col width="10" />
</colgroup>
<tr>
<td style="width: 10px; height: 10px">
<img src="images/circle_upperleft.png" alt="" />
</td>
<td style="background-color: White; width: 1000px; height: 10px">
</td>
<td style="width: 10px; height: 10px">
<img src="images/circle_upperright.png" alt="" />
</td>
</tr>
<tr>
<td style="width: 10px; background: white; height: 225px;">
&nbsp;
</td>
<td style="background-color: White; width: 1000px; height: 225px;">
</td>
<td style="width: 10px; background: white; height: 225px;">
&nbsp;
</td>
</tr>
<tr>
<td style="width: 10px; height: 10px">
<img src="images/circle_lowerleft.png" alt="" />
</td>
<td style="background-color: White; width: 1000px; height: 10px">
</td>
<td style="width: 10px; height: 10px">
<img src="images/circle_lowerright.png" alt="" />
</td>
</tr>
</table>
Jan 29 '07 #4

P: n/a
Scripsit Rudi Hausmann:
Thanks to everybody for your help.
I wonder what was wrong in my simple answer that you apparently aren't
following. It was a correct answer. Whether it was the correct answer to the
question you had in your mind depends on whether you wrote the real question
here.
This is the table I produced so far
and which I couldn't make to run on IE7 up to now.
Your expression is vague. Do you mean this is the version that didn't work,
or the one you now think that works? And where's the URL? It's _so_ much
easier to study techniques using images when you have those images, for
example.
<table border="0" cellpadding="0" cellspacing="0" style="height: 80%">
The height setting is something that you didn't mention.
<colgroup>
<col width="10" />
<col width="1000" />
<col width="10" />
</colgroup>
That grossly absurd. Why would you set such huge width requirements?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jan 29 '07 #5

P: n/a
Jukka K. Korpela wrote:
Scripsit Rudi Hausmann:
>Thanks to everybody for your help.

I wonder what was wrong in my simple answer...
Well, using MS`s VS I get warnings when using height and width. This of
course doesn't mean that your answers are wrong.

The point is, your hints helped me out of my problems and I wanna thank
you a lot! It was quite "funny", that white spaces in the corners made
the inner part higher. Something which is hard to understand.
The height setting is something that you didn't mention.
><colgroup>
<col width="10" />
<col width="1000" />
<col width="10" />
</colgroup>

That grossly absurd. Why would you set such huge width requirements?
As aspx master, to achieve a width of around 1024 totally. So to say
designed for 1024 or like that...
Jan 30 '07 #6

P: n/a
On 30 Jan, 06:28, Rudi Hausmann <rudi...@nospam.comwrote:
Well, using MS`s VS I get warnings when using height and width.
Hmmmm......

Visual Studio vs. Jukka in a "valid coding style" contest? Now that's
going to be interesting.

Jan 30 '07 #7

P: n/a
Rudi Hausmann <ru*****@nospam.comwrote:
Jukka K. Korpela wrote:
Scripsit Rudi Hausmann:
<colgroup>
<col width="10" />
<col width="1000" />
<col width="10" />
</colgroup>
That grossly absurd. Why would you set such huge width requirements?

As aspx master, to achieve a width of around 1024 totally. So to say
designed for 1024 or like that...
So, say, on my monitor which displays 1280px in width, and browser
window which is typically around 700px in width (so I can have several
windows up side-by-side), this is going to work how, exactly?

Why not take the "width" attribute off the middle column, and let it
size itself according to the content it contains and available canvas
space.

Or at least set its width in percentages, not absolute units, so it has
some hope of adapting gracefully to displays that are not yours.

--
Joel.
Jan 30 '07 #8

This discussion thread is closed

Replies have been disabled for this discussion.