Google and rounded corners

T

TheCornjerker

I've been looking into what method I should use to show rounded corners
(and I've found a lot). My question is why does Google seems to mostly
use the table method with an image in each corner. Granted they do use
a transparent gif so they don't need multiple colored gifs, but I
thought most developers shun the table rounded corner method.

Any thoughts why? Is it easier to maintain or have a higher browser
support?
Thanks.
 
U

Une Bévue

TheCornjerker said:
I've been looking into what method I should use to show rounded corners
(and I've found a lot).
Click to expand...

i answer by a question, could you, please, give the web pages where you
get tuto on rounded corners ?

here are mines :

Nifty Corners :
<http://webdesign.html.it/articoli/leggi/528/more-nifty-corners/1/>


Transparent custom corners and borders :
<http://www.456bereastreet.com/archive/200505/transparent_custom_corners
_and_borders/>

Scalable rounded edges :
<http://acjs.net/weblog/2004/11/23/scalable_rounded_edges/>

what kind of you plan tu use ?

i think the nifty seems to be the easiest to implement, example 1 :
<http://html.it/articoli/esempi/articoli_pro/nifty2/nifty1js.html>

i plan to use this solution if it works with three levels of nifty
corners embricated.
 
T

TheCornjerker

I like niftycube as well, but it seems to break down with 100% height
divs. See below in IE 6.0.

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

<head>
<style>
html, body {
margin:0;
padding:0px 0px 10px 0px;
overflow:hidden;
height:100%;
}
body {
background-color:#fff;
display:block;
}
div#main {
display:block;
margin:50px 0px 0px 0px;
}
div#nav {
display:block;
float:left;
margin:0px 10px 0px 10px;
width:200px;
background-color:#99ccff;
height:100%;
}

</style>
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#nav","big");
}
</script>
</head>
<body>
<div id=main>
<div id=nav>
<table>
<tr>
<td>Line 1</td>
</tr>
<tr>
<td>Line 2</td>
</tr>
</table>
</div>
</div>
</body>
</html>
 
C

cwdjrxyz

TheCornjerker said:
I've been looking into what method I should use to show rounded corners
(and I've found a lot). My question is why does Google seems to mostly
use the table method with an image in each corner. Granted they do use
a transparent gif so they don't need multiple colored gifs, but I
thought most developers shun the table rounded corner method.
Click to expand...

One method I used several years ago is at
http://www.cwdjr.net/geometric/cornertest.html . It uses only CSS and
no script. One makes use of the z-index so you can use a single whole
circle for each corner rather than having to slice and dice circles to
make four different corner images. It does not use tables, but it does
use absolute positioning which may not be convenient for some. Yes,
many methods have been used. Use the one you find most easy to use so
long as it validates and does not increase the byte size of the page
too much for a large page that is beginning to become slow loading.
 
D

Douglas Crockford

TheCornjerker said:
I've been looking into what method I should use to show rounded corners
(and I've found a lot). My question is why does Google seems to mostly
use the table method with an image in each corner. Granted they do use
a transparent gif so they don't need multiple colored gifs, but I
thought most developers shun the table rounded corner method.

Any thoughts why? Is it easier to maintain or have a higher browser
support?
Thanks.
Click to expand...

HTML, by design, has always been weak in layout. Trivial feats of alignment are
virtually impossible. The only alignment tool with any power is the <table>.
Tables were heavily abused and misused, the misuse encouraged by imaging slicing
tools such as Dreamweaver. Tables were used to create presentations which were
in no way tabular, which does seem wrong.

The pendulum of fashion has now swung the other way, shunning tables for
alternate forms which are often worse, such as deeply nested divs coupled with
overly complex styles.

The fundamental problem is that HTML lacks the ability to compose new structures
while CSS is unable to present the most basic layouts and stylings. The amount
of work required to make rounded corners is vastly out of proportion with the
value of their visual impact.

It seems that someone at Google decided that the easiest route was to use a
table with images in the corners. It is out of fashion, but it is strictly not
worse than the alternatives.
 
U

Une Bévue

TheCornjerker said:
I like niftycube as well, but it seems to break down with 100% height
divs. See below in IE 6.0.
Click to expand...

thanks for that point because i don't have a way to verify (i'm running
a Mac OS X box)
 
K

Kevin Darling

Douglas said:
The fundamental problem is that HTML lacks the ability to compose new structures
while CSS is unable to present the most basic layouts and stylings. The amount
of work required to make rounded corners is vastly out of proportion with the
value of their visual impact.
Click to expand...

Agreed, the work is definitely out of proportion.

That said, I sure with browsers all had IE behaviors. As someone who
came from a Netscape background and was dragged kicking and screaming
into IE, I have to admit that javascript-based behaviors are very handy
for extending HTML/CSS.

For example, I created a behavior class for rounding, based on Nifty
Corners. (This code has been lost in a disk crash, unforunately, so
please don't ask :) It was nice, because combined with other classes,
it made things quite easy and readable. For example, something like
this could be written:

<div class="blue rounded top"></div>

I've searched, but can't find anything equivalent to behaviors in other
browsers. Is there?

Thanks! Kev
 
C

cwdjrxyz

cwdjrxyz said:
One method I used several years ago is at
http://www.cwdjr.net/geometric/cornertest.html . It uses only CSS and
no script. One makes use of the z-index so you can use a single whole
circle for each corner rather than having to slice and dice circles to
make four different corner images. It does not use tables, but it does
use absolute positioning which may not be convenient for some. Yes,
many methods have been used. Use the one you find most easy to use so
long as it validates and does not increase the byte size of the page
too much for a large page that is beginning to become slow loading.
Click to expand...

I updated this page to a form using javascript. The first script allows
you to select where on the page the text box is displayed, the radius
of the rounded corners, etc. You can also select to center the text box
with respect to screen width or height. In case of height, centering is
in respect to full screen display. There is no telling how many tool
bars a browser may be set to display in other than full screen mode.
Play around with these values to see what can be done. A second,
longer script does the dirty work. It remains the same, so it could be
used as an external script to avoid clutter.

I think I also can do this without an image. I might try that sometime
when I have more time.
By the way, the circle gif color need not be the same as the background
color for the text box. In that case you get fancy corners of another
color.
 
C

cwdjrxyz

cwdjrxyz said:
I updated this page to a form using javascript. The first script allows
you to select where on the page the text box is displayed, the radius
of the rounded corners, etc. You can also select to center the text box
with respect to screen width or height. In case of height, centering is
in respect to full screen display. There is no telling how many tool
bars a browser may be set to display in other than full screen mode.
Play around with these values to see what can be done. A second,
longer script does the dirty work. It remains the same, so it could be
used as an external script to avoid clutter.

I think I also can do this without an image. I might try that sometime
when I have more time.
By the way, the circle gif color need not be the same as the background
color for the text box. In that case you get fancy corners of another
color.
Click to expand...

A URL for the scripted page might help!
http://www.cwdjr.net/geometric/cornersnew.html .
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

rounded corners without images 13
Rounded Corners: FireFox vs. IE 5
5x5 rounded-corner table 8
DIV with rounded Corners (CSS) AND full height 2
3 column, equal height, round corners, alpha png 0
Class Viewer, Google searches, and rankings 36
Google Summer of Code proposal: GRuVeR: A General Ruby library forsolving Routing Vehicle Problems 6
The devolution of English language and slothful c.l.p behaviors exposed! 50

Members online

Total: 28 (members: 2, guests: 26)
Robots: 462

Forum statistics

Threads
473,770
Messages
2,569,583
Members
45,075
Latest member
MakersCBDBloodSupport

Latest Threads

Top