Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Round Table Corners

    Hi,

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

    DHTMLHELP

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ontario, Canada
    Posts
    183
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <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.
    Offtone.com - In the works...

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Posts
    626
    Thanks
    0
    Thanked 0 Times in 0 Posts
    To make it Cross Browsers you will probably have to use an image in each corner to do that.

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    632
    Thanks
    1
    Thanked 21 Times in 21 Posts
    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>

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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.

  • #7
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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).

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #9
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    If you read the replies, you'd know you can't do it using that for IE

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What should I use then?

    DHTMLHELP

  • #11
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Images, precisely four - one for each corner.

    And some extra table layout work to boot.

  • #12
    Regular Coder
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #13
    Regular Coder
    Join Date
    Jun 2002
    Location
    Montreal, Canada
    Posts
    644
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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(rotat ion="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

  • #14
    Regular Coder
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi xgoose,

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

    thanks,

    DHTMLHELP


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •