...

View Full Version : Round Table Corners



dhtmlhelp
06-21-2002, 11:33 AM
Hi,

is there any style attribute to make the corners in tables round? Also is it possible to define the 'level of roundness'?

DHTMLHELP

SYP}{ER
06-21-2002, 11:45 AM
<style type="text/css">
-moz-border-radius: 30px;
</style>

I'm 99.9% sure of that being the right way to do it ;) Only works in Mozilla though, unless NS6 or 7 can do it now, too.

dhtmlhelp
06-21-2002, 12:11 PM
Hi Sypher,

so can I use:

<table style="-moz-border-radius: 30px;">
<tr>
<td>

</td>
</tr>
</table>

or

<table -moz-border-radius="30px">
<tr>
<td>

</td>
</tr>
</table>

Also does it work in IE?

DHTMLHELP

requestcode
06-21-2002, 01:43 PM
To make it Cross Browsers you will probably have to use an image in each corner to do that.

jalarie
06-21-2002, 01:50 PM
To handle a RoundTable corner, call King Arthur and ask him to send over a knight and sword. He'll cut off anything that gets in the way! <grin>

jkd
06-21-2002, 04:54 PM
The CSS3 specs provide for a property known as "border-radius".

When Mozilla has partial support for a property, but not entirely valid, it appends a -moz- in front of it.

The CSS3 border-radius value's call for two measurements, one is for the width of the curve, the other for the height.

The Mozilla -moz-border-radius value only accepts one measurement, which defines both the width and the height.

There's the entire explanation behind it. ;)
(Another CSS3 property is opacity:, and I am letting you figure out why Mozilla has -moz-opacity ;)).


Anyway, it *must* be used in a style definition, not directly as an HTML attribute dhtmlhelp. :)

jkd
06-21-2002, 04:55 PM
Oh, and that should work in all versions of NS6 (most at least, if not all), NS7, K-meleon, Galeon, Beonex, Mozilla, etc.

It is used for some chrome widgets in the XUL of the window (in some themes).

dhtmlhelp
06-21-2002, 08:27 PM
Hi,

does anyone know how I can achieve this in IE:



<table style="-moz-border-radius: 30px;">
<tr>
<td>

</td>
</tr>
</table> ?????

or

<table -moz-border-radius="30px">
<tr>
<td>

</td>
</tr>
</table> ??????



DHTMLHELP

Nightfire
06-21-2002, 08:29 PM
If you read the replies, you'd know you can't do it using that for IE

dhtmlhelp
06-21-2002, 10:16 PM
What should I use then?

DHTMLHELP

jkd
06-21-2002, 10:41 PM
Images, precisely four - one for each corner. ;)

And some extra table layout work to boot. :(

dhtmlhelp
06-21-2002, 11:56 PM
Hi everyone,

thank you for your help. It doesn't look like there is a small kb solution to my problem. Hopefully they will decide to remove the -moz- one day and make it IE compatible.

DHTMLHELP

x_goose_x
06-22-2002, 12:22 AM
For the ie solution if you choose to use images you don't need 4 different ones, you can also use:

document.getElementById("image_id").style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation="1")

1 = 90 degrees.

I think this works in ie4+. I know it works in ie6

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/properties/rotation.asp

dhtmlhelp
06-22-2002, 12:34 AM
Hi xgoose,

that is very clever, I'll have a go at it.

thanks,

DHTMLHELP



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum