Curved edges on tables

[ZeptOr]

I've seen websites with curved edges on tables, and I know how to do it by adding images that are curved. I want to know if there is some CSS code to do it for you, so you don't have to rely on images to load.

 

[DizzyTechnology]

Nifty Corners, More Nifty Corners, and Nifty Corners Cube.
Have a nice day.
PS: Nifty Corners, original, the CSS example makes a great error page.
Nifty Corners Cube is great for a site.
http://www.html.it/articoli/nifty/index.html

 

[kryptonyte]

If the user is using Mozilla you can add this to the CSS to make the corners rounded.

-moz-border-radius: 10px;

Of course you can change 10px to any number you like.

 

[Cubeform]

If the user is using Mozilla you can add this to the CSS to make the corners rounded.

-moz-border-radius: 10px;

Of course you can change 10px to any number you like.

That's CSS3. There's also this code:

border: 6px solid #000;
-moz-border-bottom-colors: #aaa #bbb #ccc #ddd #eee #fff;
-moz-border-top-colors:   #aaa #bbb #ccc #ddd #eee #fff;
-moz-border-left-colors:  #aaa #bbb #ccc #ddd #eee #fff;
-moz-border-right-colors:  #aaa #bbb #ccc #ddd #eee #fff;

Which will create a border that fades to white in Mozilla. For backwards compatibility, the border's original colour is black

Also, you can combine, of course.

border: 6px solid #000;
-moz-border-bottom-colors: #aaa #bbb #ccc #ddd #eee #fff;
-moz-border-top-colors:   #aaa #bbb #ccc #ddd #eee #fff;
-moz-border-left-colors:  #aaa #bbb #ccc #ddd #eee #fff;
-moz-border-right-colors:  #aaa #bbb #ccc #ddd #eee #fff;
-moz-border-radius: 8px;

Safari/WebKit has more CSS3 that you can toy around with.

 

[ZeptOr]

okay, i understand how to make it using nifty corners, but i have on problem

I can make one nifty corner table, but the second one i make doesn't have the rounded corners, and I can't figure out why

for instance, look at this and my code:

http://greenear.x10hosting.com/Main/index

oh, and another thing, whenever i try to view that site in firefox, it just shows the code

 

[Chris Z]

maybe you should add the extension ".html" to the end lol
edit- IE doesn't follow the W3 Standards, that's why it shows up in IE fine, but FF can't parse it if it doesn't know the extension

 

[ZeptOr]

i thought it added it for you if you selected it as an HTML document, but yeah I'll fix that soon

but do you have any ideas about the curved edges problem?

 

[Brandon]

i thought it added it for you if you selected it as an HTML document, but yeah I'll fix that soon

but do you have any ideas about the curved edges problem?

]


What program are you using???

 

[ZeptOr]

its not the program, it is the fact that I am missing some line of code. Im just using notepad anyways

 

[Brandon]

its not the program, it is the fact that I am missing some line of code. Im just using notepad anyways

Ya in notepad you have to end it with .htm or .html..it cant do it automatically.

 

[ZeptOr]

okay yeah i got that part

but thats not the problem

the problem is that when I make a second "nifty corner" box, it does not have the curved edges, only the first one has curved edges.

I call it the same way, <div id="nifty"> and end it the same way, </div>, but it does not process... thats the problem

here is an example: http://greenear.x10hosting.com/Main/index.html

as you can see, the first box has curved corners but the second doesn't, why is that?

 

[Richard]

Because you are only allowed to use an ID once in and html page (w3c standard).

You have too add another entry for each ID nifty1, nifty2, nifty3 etc

 

[Brandon]

Because you are only allowed to use an ID once in and html page (w3c standard).

You have too add another entry for each ID nifty1, nifty2, nifty3 etc

I think ur right because im on my server and when I go to his site I get "...The Content dosnt match its Security Information..."

http://71.243.12.71:9600/screen.PNG (Since I have dynamic IP it might not work after a few days)

 

[ZeptOr]

i changed the address to .html, try that blog

http://greenear.x10hosting.com/Main/index.html

 

[Brandon]

i changed the address to .html, try that blog

http://greenear.x10hosting.com/Main/index.html

Works now dumb IE wasnt workin ealier..said there was a java applet to install and stuff

 

[ZeptOr]

the .html one wasn't working earlier?

but really.. can you only call an div ID once?

 

[Richard]

Element identifiers: the id and class attributes

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.

Think of the ID atribute as an ID number (or an SSN for you American's) each one needs to be diffrent.

 

[ZeptOr]

okay, so for each nifty corner box that I want on my website, i need a serparate ID?

*I just started messing around with it, and I am coming up with my template.. its very basic now, but im proud that I got the nifty corners working

http://greenear.x10hosting.com/Main/index2.html

 

[Zenax]

you could always change it so you have a single class instead of all the different id's