Google and rounded corners

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.

Oct 15 '06 #1

Follow Post Reply

2286

Une Bévue

TheCornjerker <ad****@gmail.comwrote:

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

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/archiv...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.

Oct 15 '06 #2

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>

Oct 15 '06 #3

cwdjrxyz

TheCornjerker wrote:

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.

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.

Oct 15 '06 #4

Douglas Crockford

TheCornjerker wrote:

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.

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.

Oct 15 '06 #5

Une Bévue

TheCornjerker <ad****@gmail.comwrote:

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

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

Oct 15 '06 #6

Kevin Darling

Douglas Crockford wrote:

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.

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

Oct 15 '06 #7

cwdjrxyz

cwdjrxyz wrote:

TheCornjerker wrote:
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.

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.

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.

Oct 17 '06 #8

cwdjrxyz

cwdjrxyz wrote:

cwdjrxyz wrote:
TheCornjerker wrote:
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.
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.

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.

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

Oct 17 '06 #9

Google and rounded corners

This discussion thread is closed

Similar topics