|
|
|
| Hi at all,
I'ld like to know what is the best CSS crossbrowser mean to round the
angles of <DIV> without images.
Regards and thank you very much in advance
Steel
| |
|
|
| Spartanicus 2005-11-13, 6:51 pm |
| "Steel" <steelnotspamming@notnotsteeel.net> wrote:
>I'ld like to know what is the best CSS crossbrowser mean to round the
>angles of <DIV> without images.
Assuming that you mean rounded borders, there is no such method. The
required CSS is part of the CSS3 proposals, afaik no browser supports
that yet. Recent Gecko based browsers have proprietary -moz- properties
to create rounded borders.
Using those proprietary properties, Gecko renders non anti-aliased round
borders, quite ugly. The same ugly rendering can be expected from other
browsers when they implement it, so you are better off by using one of
the existing image based methods for the foreseeable future.
--
Spartanicus
| |
| Gus Richter 2005-11-13, 6:51 pm |
| Steel wrote:
> Hi at all,
> I'ld like to know what is the best CSS crossbrowser mean to round the
> angles of <DIV> without images.
> Regards and thank you very much in advance
> Steel
If you would like to try CSS3, then try this:
<style type="text/css">
a:link.roundedCorners {
margin: 0;
padding: 0 2px;
border: solid 1px #f33;
-moz-border-radius: 50%
}
a:hover.roundedCorners {
background-color: #fcc;
margin: 0;
padding: 0 2px;
border: solid 1px #f00;
-moz-border-radius: 50%
}
</style>
<p>This is an <a class="roundedCorners" href="#">example</a>, of CSS
rounded corners. Firefox/Moz will present <a class="roundedCorners"
href="#">Round Borders</a> initially as well as on hover. All others
will show a square border only on hover.</p>
--
Gus
| |
|
| Once upon a time *Steel* wrote:
> Hi at all,
> I'ld like to know what is the best CSS crossbrowser mean to round the
> angles of <DIV> without images.
> Regards and thank you very much in advance
If you don't mind different background colors for the boxes, try this
links:
http://www.cssplay.co.uk/boxes/snazzy.html
http://www.cssplay.co.uk/boxes/krazy.html
Not the best solutions, but to a certain degree possible as
workarounds until CSS3 is videly supported. :)
--
/Arne
-- *Joke of the day* ----------------------------------------
A customer called the Canon help desk with a problem with her printer.
Tech Support: Are you running it under 'Windows'?
Customer: No, my desk is next to the door, but that is a good point.
The man sitting next to me is under a window, and his printer is
working fine.
-------------------------------------------------------------
| |
| David Dorward 2005-11-13, 6:51 pm |
| Gus Richter wrote:
> If you would like to try CSS3, then try this:
> -moz-border-radius: 50%
That isn't CSS3. Its a proprietary implementation of something that might be
in CSS 3 under a different name.
--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
| |
| Gus Richter 2005-11-13, 6:51 pm |
| David Dorward wrote:
> Gus Richter wrote:
>
>
>
>
>
>
> That isn't CSS3. Its a proprietary implementation of something that might be
> in CSS 3 under a different name.
>
Very observant! Thank you for the correction.
It is an experimental use by Mozilla of the proposed CSS3 specification.
--
Gus
| |
| Toby Inkster 2005-11-13, 10:45 pm |
| Gus Richter wrote:
> It is an experimental use by Mozilla of the proposed CSS3 specification.
And it's incompatible with the proposed CSS3 property!
The Mozilla implementation has a shorthand like:
border-radius: topleft topright bottomright bottomleft;
CSS3 doesn't.
OTOH CSS3 allows you to specify eliptically shaped borders: Mozilla
doesn't.
--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
| |
| Toby Inkster 2005-11-13, 10:45 pm |
| Spartanicus wrote:
> Assuming that you mean rounded borders, there is no such method. The
> required CSS is part of the CSS3 proposals, afaik no browser supports
> that yet. Recent Gecko based browsers have proprietary -moz- properties
> to create rounded borders.
There's also -khtml-border-radius.
--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
| |
| Gus Richter 2005-11-13, 10:45 pm |
| Toby Inkster wrote:
> Gus Richter wrote:
>
>
>
>
> And it's incompatible with the proposed CSS3 property!
>
> The Mozilla implementation has a shorthand like:
>
> border-radius: topleft topright bottomright bottomleft;
>
> CSS3 doesn't.
>
> OTOH CSS3 allows you to specify eliptically shaped borders: Mozilla
> doesn't.
Thank you for that. As I said, it is experimental.
Nothing wrong with a proprietary capability!
Support is not complete for something which may change at any time.
As they like to say, if you want that capability, submit a patch or get
someone to take interest and do it for you. ;-)
--
Gus
| |
| kchayka 2005-11-13, 10:45 pm |
| Toby Inkster wrote:
> Gus Richter wrote:
>
>
> And it's incompatible with the proposed CSS3 property!
-moz-border-radius has been in place for several years now, based on the
CSS3 spec at the time it was implemented. The -moz version hasn't
changed, but the spec has.
Stuff happens. Be glad there is a -moz property so their now
non-standard version won't affect other browsers.
--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |