# Web Pages: Rounded Corners



## Tarnishedwisdom (Mar 8, 2002)

I have seen these rounded corner deals on TABLES, that give the table the effect that it is round, and not square. I did some research and have figured out how to accomplish this, but I keep running into a small prob. On the very bottom of this page there is an overlapping (that is the best way I know how to describe it). I have all of my rounded images in place, but I can't figure out how to get rid of the extra white at the bottom. Does anyone know how I can go about fixing this? I must warn you that my site is still in the making and it may not look all that great, none of the links work, it has no content etc. Thanks in advance for any help...


----------



## juryu (Feb 7, 2003)

Gee, this was weird. Remove all whitespace between tags on those cells, that is, make it &lt;td&gt;&lt;img src=...&gt;&lt;/td&gt;. The only reason I thought of this was because I've seen it happen before... but I don't know the explanation. 

May I give you a couple of hints? Your code is kind of messy. There are many unnecessary tables. Sometimes I see you use one table and then another (below it) instead of two tr. For example, the title and then the main part. If the problem is that the title row has 2 cells and the main part only 1 (with another table inside it), then you can always use colspan=2 on the second row... it is more clean, in my opinion. 

There are some "invisible" td in your code. Your v_line.gif doesn't show, because it is the background of one of these td... you have to give it some width, and the tr must also have some height, either by explicitly telling it the height, or by having another td with some content in the same tr, otherwise your cell has no size...


----------



## Mosaic1 (Aug 17, 2001)

I think I have it for you. I agree. Your html is messy. I am not sure it is oging to hold up in a less forgiving browser than IE is. The other problem was caused by your putting a height = 100% tag in the center table here:


```
[TABLE]
```
 I took it out but then had a white line going across the bottom right below the rounded corners. . I added a space after each bottom corner image and that erased the white line. I then added a space after the small top menu to center the white and it works. Here's a screenshot:
I'll attach the html in the form of a text file in the next post.


----------



## Mosaic1 (Aug 17, 2001)

Here's your original source edited to reflect the change.


----------



## Mosaic1 (Aug 17, 2001)

I had another look. If you change the top margin to 4, I think the top of the Window will not look cut off.

The menu will be centered if you changed the style sheet like this. 

```
P.name {
	TEXT-INDENT: 0px; LETTER-SPACING: 1.9px
}
P.menu {
	TEXT-INDENT: 17px; LETTER-SPACING:1.9px
```
 And then change the tag here from align right to align center.


```
align="right" bgcolor="#666666">

[URL=index.html]home[/URL] 
[URL=templates.html]search[/URL] 
[URL=custom.html]employers[/URL] 
[URL=http://thesquares.netfirms.com/cgi-

bin/teemz/teemz.cgi]resume[/URL] 
[URL=support.html]contacts[/URL]
```


----------



## Mosaic1 (Aug 17, 2001)

I just opened your site in Netscape. Your code doesn't hold up. If you have another browser, have a look. I think you should start again and redo your tables. 

The newer versions of Compuserve and AOL now use Netscape. A lot of people will not be viewing the site as it should be seen.


----------



## Tarnishedwisdom (Mar 8, 2002)

Mosaic: wow!! thanks alot for all of the helpful advice man! Yeah, I am definately considering restarting from scratch, and hopefully make it Netscape friendly. What is the best way to make a site browser compatable? Thanks again for all of your ideas...very beneficial.


----------



## brendandonhu (Jul 8, 2002)

The best way is to keep it as simple as possible, use standard HTML (or whatever other languages you use), use % instead of pixels in tables when possible, occasionally check it in IE and Netscape (especially since AOL switched Gecko/Netscape). 
The World Wide Web Consortium creates and works with web standards. They have a free Validator that checks your page against standards and notifies you of problems, and often suggests the fix for it. Its near impossible to have a perfect page with W3C, but do as much as you can.


----------



## brendandonhu (Jul 8, 2002)

Tidy is an online W3C validator that can fix your source code, so its even better than the validator.


----------



## RP McMurphy (Feb 10, 2003)

Many people download and test their pages with some of the alternative browsers like Opera, Moz, Nutscrape, etc.

You can download many of those browsers here:

http://browsers.evolt.org/

You can also test your pages at various HTML validators.

http://www.netmechanic.com/toolbox/html-code.htm
http://www.htmlhelp.com/tools/validator/
http://validator.w3.org/
http://www2.imagiware.com/RxHTML/
http://watson.addy.com/


----------



## RP McMurphy (Feb 10, 2003)

Whoops, you beat me to it brendandonhu while I was gathering my links


----------



## Mosaic1 (Aug 17, 2001)

Tarnishedwisdom,

Hi. You're welcome. As the others have pointed out, testing your source in other browsers is a must. But to avoid the pain, the best thing to do is to sit down with a paper and pencil before you open Notepad or whatever, and plan out your page. 
How many tables, their location on the page etc. Once you have a map, it's time to figure out how to make it work.

Make some practice pages. Tables can be very confusing. They are a hard concept to grasp and do have their own rules.

IE is forgiving of html errors. Netscape demands your tables be set up correctly. Structure is the most important thing when writing a page. Also, all tags are not recognized in all Browsers.

I would be happy to help so far as I am capable. I'm sure others would too. Just post your questions.

Here's a site which explains them very well. Although I like to use % ages.

http://www.pageresource.com/html/index6.htm

I've only written a few small pages. When I first wrote my site, it was not structured well. Someone helped me tremendously. He took the time to help me and pointed out my errors. I learned how to correct my mistakes.

Good luck on your page.

Mo


----------



## Tarnishedwisdom (Mar 8, 2002)

thanks for all of your help guys. i started from scratch and simplified things (as much as i knew how). i did as you said mosaic, and drew a picture of how i want my page to look, and i can achieve my wanted look in IE, but not Netscape. here is my new page http://thesquares.netfirms.com/netscape.html. Please excuse the hideous ad banner at the top of the page, i plan to get a better host, but for now i am just using a free thing. here are my probs: it would appear that the trick of making a tiling background img does not work with Netscape. Netscape does not seem to like % when setting table height and width. i cant get the rounded corners effect to work with netscape. other than that, i like the page just as it is (in IE). do you think that the design is ok? also...is the tiling background that i use in the left cell and far right cell sleazy? in other words, is a plain bgcolor "more professional looking"? thanks again for all of your help ya'll!

oh yeah, i forgot...css does not work in netscape either!! is there an alternative?


----------



## Mosaic1 (Aug 17, 2001)

Here's link to a quick help page I wrote last week. I use %'ages along with a couple of absolute number values for table width. I was told all the major Browsers showed it well. I hope so. It is short on style. Just very structured tables so I could be sure the placement was the same in all Browsers.

Another thing. Netscape doesn't show HR's like IE. They are there, but ugly. No color.

http://www.tomcoyote.org/hjt/

Your page seems a bit too wide for my screen resolution. I changed it and it show fine. But only when the Window is maximized. Otherwise I had to scroll it. There are a lot of more experienced Html writers here on the Board. Someone will be along, I'm sure to give you a hand.

I did manage to make the top of your page look a bit less stark. I'll attach a picture and the html and you can have a look to see if you like it.

I like backgrounds. I make them myself sometimes. It all depends. If you want a nice graphics utility, Irfanview is free and works great. I make a jpeg. Then lighten up the images. Using that as a background looks good.

www.irfanview.com

Example of a backgroubd made using this method.
This page is part of my original web Page. I like a clean and simple look. (It's part of a tutorial I wrote.) 
http://www.geocities.com/backgammon1_2000/ietoolbar/tipsandhelpsites.html

You have to be the judge. Do you like it? are you comfortable with how things look and does the page do the job, look good in various browsers. How long it takes to load is important too.

Here's the html. I'll attach a screen shot in my next post.


----------



## Mosaic1 (Aug 17, 2001)

Here's the screenshot.


----------



## Mosaic1 (Aug 17, 2001)

Ok I am not experienced with this. Stylesheet. Have a look at how it is used at SpywareInfo and see if you can use yours the same way. Here's the link:

http://www.spywareinfo.com/yabbse/


----------



## brendandonhu (Jul 8, 2002)

CSS should definitely work in Netscape. Are you sure your using valid code? I think Netscape 4xx and up has CSS. They have always been good for adding new "stuff" early like Javascript, JS 1.2, JS Files, and RSS.


----------



## Tarnishedwisdom (Mar 8, 2002)

ok...i changed the bgcolor on the far left and far right cells (i think its an improvement...not sure though). but, when viewed with IE its perfect. when viewed with Netscape, it sucks. for some reason, it has to do with the % thing. when i dont use % it works with both browsers. but when i use % it works in IE only. why is this? i took a look at your site Mosaic and you used percents, and it looked pretty much the same in both browsers. ugh.


----------



## Mosaic1 (Aug 17, 2001)

I don't have an Independent Netscape installed. I have Compuserve which uses Netscapse as its Browser. Your latest showed well using thie Netscape version. The tables were ok. Although the bottom of the table had no end again in either Browser. No rounded corners.

One observation about background color and images. Did you notice the ragged edges on the gif? That is a result if having it on a too dark background. If you lighten the backgound the image will look cleaner.

You see those same ragged edges on the Rouded corners. Here's a link to a site which explains why this happens:

http://www.kimmygemgraphics.com/My Documents/tutorials/photoshop.htm

It's a photoshop tutorial, but the information applies to all images.


----------

