rounded corners - and no tables

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • phil-news-nospam@ipal.net
    #1

    rounded corners - and no tables

    Hey, look, Ma! No tables!

    Here is my attempt at making rounded corners. It uses a bunch of element
    layers to merge 4 background images. But, it seems to work. Now if there
    was just a way to style someone else's arbitrary single DIV container this
    way.

    The 4 boxes shown have slightly increasing corner radii:

    http://phil.ipal.org/usenet/ciwas/2006-05-02/rcb1.html


    The quick way to see the CSS:

    http://phil.ipal.org/usenet/ciwas/2006-05-02/rcb1.css


    And in case your browser doesn't render this right, here is what my Firefox
    1.5.0.2 does:

    http://phil.ipal.org/usenet/ciwas/2006-05-02/rcb1.png


    I have no idea if this works in IE, and no convenient way at the moment
    to try it out.

    --
    -----------------------------------------------------------------------------
    | Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
    | (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
    -----------------------------------------------------------------------------
    Tags: None
    • Mark Parnell
      #2
      Re: rounded corners - and no tables

      Deciding to do something for the good of humanity,
      <phil-news-nospam@ipal.net > declared in
      comp.infosystem s.www.authoring.stylesheets:
      [color=blue]
      > http://phil.ipal.org/usenet/ciwas/2006-05-02/rcb1.html[/color]
      [color=blue]
      > I have no idea if this works in IE, and no convenient way at the moment
      > to try it out.[/color]

      It doesn't - the rounded corners are not visible at all.

      --
      Mark Parnell
      My Usenet is improved; yours could be too:
      J9集团(china)公司官网
      http://blinkynet.net/comp/uip5.html
      J9官网洁具创立于1994年，是一家专注生产高品质卫生洁具的企业，品牌享誉国内外。产品涵盖洁具、卫浴、浴室柜、智能马桶、淋浴房、花洒、智能坐便器、浴缸、龙头等全卫精品，欢迎定制加盟，2016年J9官网洁具A股上市，成立帝欧家居股份有限公司。

        Comment

        • phil-news-nospam@ipal.net
          #3
          Re: rounded corners - and no tables

          On Wed, 3 May 2006 14:30:48 +1000 Mark Parnell <webmaster@clar kecomputers.com .au> wrote:
          | Deciding to do something for the good of humanity,
          | <phil-news-nospam@ipal.net > declared in
          | comp.infosystem s.www.authoring.stylesheets:
          |
          |> http://phil.ipal.org/usenet/ciwas/2006-05-02/rcb1.html
          |
          |> I have no idea if this works in IE, and no convenient way at the moment
          |> to try it out.
          |
          | It doesn't - the rounded corners are not visible at all.

          As I found out last night from someone on IRC that tried it (and gave me a
          PNG screen capture). Maybe some other way to specify the image URLs in the
          CSS might work, but for now it's not practical for me to experiment since I
          don't have IE running here right now. But at least it seems to degrade in
          a graceful way to square corners without being mangled. So while IE users
          won't see all of the intended style, they could see most of it, and see all
          of the content. For that, it won't bother me to use this method (when IE
          users are in my audience, as they likely will be).

          --
          -----------------------------------------------------------------------------
          | Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
          | (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
          -----------------------------------------------------------------------------

            Comment

            • m00dekoe
              #4
              Re: rounded corners - and no tables

              phil-news-nospam@ipal.net wrote:[color=blue]
              > On Wed, 3 May 2006 14:30:48 +1000 Mark Parnell <webmaster@clar kecomputers.com .au> wrote:
              > | Deciding to do something for the good of humanity,
              > | <phil-news-nospam@ipal.net > declared in
              > | comp.infosystem s.www.authoring.stylesheets:
              > |
              > |> http://phil.ipal.org/usenet/ciwas/2006-05-02/rcb1.html
              > |
              > |> I have no idea if this works in IE, and no convenient way at the moment
              > |> to try it out.
              > |
              > | It doesn't - the rounded corners are not visible at all.
              >
              > As I found out last night from someone on IRC that tried it (and gave me a
              > PNG screen capture). Maybe some other way to specify the image URLs in the
              > CSS might work, but for now it's not practical for me to experiment since I
              > don't have IE running here right now. But at least it seems to degrade in
              > a graceful way to square corners without being mangled. So while IE users
              > won't see all of the intended style, they could see most of it, and see all
              > of the content. For that, it won't bother me to use this method (when IE
              > users are in my audience, as they likely will be).
              >[/color]

              In that case you might as well just specify:

              -moz-border-radius for gecko based browsers (moz,ff)
              -khtml-border-radius for khtml based browsers (konqueror, safari)
              border-radius for css3 compliant browsers (aka the future)


                Comment

                • m00dekoe
                  #5
                  Re: rounded corners - and no tables

                  Michael Vilain wrote:[color=blue]
                  > In article <e3b1i9$mgr$1@n ews3.tilbu1.nb. home.nl>,
                  > m00dekoe <anonymous@exam ple.com> wrote:
                  >[color=green]
                  >> phil-news-nospam@ipal.net wrote:[color=darkred]
                  >>> On Wed, 3 May 2006 14:30:48 +1000 Mark Parnell
                  >>> <webmaster@clar kecomputers.com .au> wrote:
                  >>> | Deciding to do something for the good of humanity,
                  >>> | <phil-news-nospam@ipal.net > declared in
                  >>> | comp.infosystem s.www.authoring.stylesheets:
                  >>> |
                  >>> |> http://phil.ipal.org/usenet/ciwas/2006-05-02/rcb1.html
                  >>> |
                  >>> |> I have no idea if this works in IE, and no convenient way at the moment
                  >>> |> to try it out.
                  >>> |
                  >>> | It doesn't - the rounded corners are not visible at all.
                  >>>
                  >>> As I found out last night from someone on IRC that tried it (and gave me a
                  >>> PNG screen capture). Maybe some other way to specify the image URLs in the
                  >>> CSS might work, but for now it's not practical for me to experiment since I
                  >>> don't have IE running here right now. But at least it seems to degrade in
                  >>> a graceful way to square corners without being mangled. So while IE users
                  >>> won't see all of the intended style, they could see most of it, and see all
                  >>> of the content. For that, it won't bother me to use this method (when IE
                  >>> users are in my audience, as they likely will be).
                  >>>[/color]
                  >> In that case you might as well just specify:
                  >>
                  >> -moz-border-radius for gecko based browsers (moz,ff)
                  >> -khtml-border-radius for khtml based browsers (konqueror, safari)
                  >> border-radius for css3 compliant browsers (aka the future)[/color]
                  >
                  > I googled "-khtml-border-radius" and it found no relevant hits. It
                  > asked if I really wanted "-html-border-radius". Got a URL that explains
                  > this property in depth?
                  >
                  > TIA!
                  >[/color]

                  be sure to include the quotes when feeding it to google
                  ("-khtml-border-radius"), I guess it will be searching for anything
                  without 'khtml-border-radius' in it if you don't include the quotes. I
                  hear (as in read it but haven't checked) Opera supports the
                  border-radius property already, too.

                    Comment

                    • phil-news-nospam@ipal.net
                      #6
                      Re: rounded corners - and no tables

                      On Wed, 03 May 2006 21:50:33 +0200 m00dekoe <anonymous@exam ple.com> wrote:
                      | phil-news-nospam@ipal.net wrote:
                      |> On Wed, 3 May 2006 14:30:48 +1000 Mark Parnell <webmaster@clar kecomputers.com .au> wrote:
                      |> | Deciding to do something for the good of humanity,
                      |> | <phil-news-nospam@ipal.net > declared in
                      |> | comp.infosystem s.www.authoring.stylesheets:
                      |> |
                      |> |> http://phil.ipal.org/usenet/ciwas/2006-05-02/rcb1.html
                      |> |
                      |> |> I have no idea if this works in IE, and no convenient way at the moment
                      |> |> to try it out.
                      |> |
                      |> | It doesn't - the rounded corners are not visible at all.
                      |>
                      |> As I found out last night from someone on IRC that tried it (and gave me a
                      |> PNG screen capture). Maybe some other way to specify the image URLs in the
                      |> CSS might work, but for now it's not practical for me to experiment since I
                      |> don't have IE running here right now. But at least it seems to degrade in
                      |> a graceful way to square corners without being mangled. So while IE users
                      |> won't see all of the intended style, they could see most of it, and see all
                      |> of the content. For that, it won't bother me to use this method (when IE
                      |> users are in my audience, as they likely will be).
                      |>
                      |
                      | In that case you might as well just specify:
                      |
                      | -moz-border-radius for gecko based browsers (moz,ff)
                      | -khtml-border-radius for khtml based browsers (konqueror, safari)
                      | border-radius for css3 compliant browsers (aka the future)

                      I now already have multi-layer borders. Next I'll be doing shadow borders.
                      Are these special custom properties supporting all that?

                      --
                      -----------------------------------------------------------------------------
                      | Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
                      | (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
                      -----------------------------------------------------------------------------

                        Comment

                        Previous template Next
                        Working...