473,545 Members | 2,173 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Google and rounded corners

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
8 2411
TheCornjerker <ad****@gmail.c omwrote:
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_rounde d_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
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=f unction(){
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

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
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
TheCornjerker <ad****@gmail.c omwrote:
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

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 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 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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
23084
by: Mel | last post by:
how can i have a rounded edge button in my forms using CSS ? thanks Mel
2
2294
by: meltedown | last post by:
I noticed that the footer menu on the bottom with rounded corners only uses one image of a rounded corner:img/round15_bot.gif This one image seems to be used for all four corners, but that can't be right. How are these corners made ? Here is the part of the css for the footer http://www.blogger.com/profile/12345910 /* Footer
2
3163
by: Konrad | last post by:
Hi This is maybe simple question but how to render DataGrid and Tables with rounded corners? Thanks Konrad
2
7755
by: Dino Buljubasic | last post by:
Hi, I have several panels that holds bunch of controls with information on my forms. My form has background image property set to an image that has borders defining where my panel comes and that border is rounded so when I set my panels border stile to none, the panel appear to have the rounded border (that comes from the forms background...
6
5491
by: Schraalhans Keukenmeester | last post by:
I want to achieve the following: A small image in each of the corners of a box, like below: +-------------------------------+ | + | + | + | + | + | +
5
8450
by: Cindy Lee | last post by:
Is there anyway to put rounded corners on the grid views? When I bring it up in the brower I need to have rounded corners. There are some tricks I can do to regular html tables, but is there any tricks for gridview because I want to use the sorting.
1
2536
by: kidelectric | last post by:
The issue I am having is that I would like to be able to drag-and-drop div elements that have rounded corners.* Since these elements will be dynamically created (including background color), I could not use the "standard" rounded corner method of sliced images for the corners (since that would only allow a certain color to match) I tried using...
4
3338
by: PWS | last post by:
I am despertely trying get a DIV to look like a box with rounded corners. I can find load of examples this where the first line of text has the top graphic and the last line of text has the bottom graphic, but all I want to have in my DIV is a TreeView coontrol. Can anyone send some code. PWS
6
10816
by: moondaddy | last post by:
I need to be able to make polygons with rounded corners. This will be to draw group outlines around shapes in a diagramming tool in wpf. all angles in the polygon will be 90 degrees, but somehow I wanted to make the corners a bit rounded (otherwise it will look like an old legacy app). Is this possible in wpf? The reason I wanted to use a...
0
7487
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7680
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
7934
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7446
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7778
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
1
5349
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
4966
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3476
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
1033
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.