1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Web Pages: Rounded Corners

Discussion in 'Software Development' started by Tarnishedwisdom, Feb 13, 2003.

Thread Status:
Not open for further replies.
Advertisement
  1. Tarnishedwisdom

    Tarnishedwisdom Thread Starter

    Joined:
    Mar 8, 2002
    Messages:
    108
    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...
     
  2. juryu

    juryu

    Joined:
    Feb 7, 2003
    Messages:
    18
    Gee, this was weird. Remove all whitespace between tags on those cells, that is, make it <td><img src=...></td>. 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...
     
  3. Mosaic1

    Mosaic1

    Joined:
    Aug 17, 2001
    Messages:
    7,486
    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:


    PHP:
    <TABLE width="100%"  cellpadding="7" cellspacing="0">
    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.
     

    Attached Files:

    • htm.gif
      htm.gif
      File size:
      13 KB
      Views:
      145
  4. Mosaic1

    Mosaic1

    Joined:
    Aug 17, 2001
    Messages:
    7,486
    Here's your original source edited to reflect the change.
     

    Attached Files:

  5. Mosaic1

    Mosaic1

    Joined:
    Aug 17, 2001
    Messages:
    7,486
    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.
    PHP:
    P.name {
        
    TEXT-INDENT0pxLETTER-SPACING1.9px
    }
    P.menu {
        
    TEXT-INDENT17pxLETTER-SPACING:1.9px
    And then change the tag here from align right to align center.

    PHP:
     align="right" bgcolor="#666666">
    <
    class="name">
    <
    FONT face="verdana, arial, helvetica" size="2" color="#FF8C00">
    <
    a href="index.html" class="name">home</a
    <
    a href="templates.html" class="name">search</a
    <
    a href="custom.html" class="name">employers</a
    <
    a href="http://thesquares.netfirms.com/cgi-

    bin/teemz/teemz.cgi" 
    class="name">resume</a
    <
    a href="support.html" class="name">contacts</a>
     
  6. Mosaic1

    Mosaic1

    Joined:
    Aug 17, 2001
    Messages:
    7,486
    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.
     
  7. Tarnishedwisdom

    Tarnishedwisdom Thread Starter

    Joined:
    Mar 8, 2002
    Messages:
    108
    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.
     
  8. brendandonhu

    brendandonhu

    Joined:
    Jul 8, 2002
    Messages:
    14,681
    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.
     
  9. brendandonhu

    brendandonhu

    Joined:
    Jul 8, 2002
    Messages:
    14,681
    Tidy is an online W3C validator that can fix your source code, so its even better than the validator.
     
  10. RP McMurphy

    RP McMurphy

    Joined:
    Feb 9, 2003
    Messages:
    91
  11. RP McMurphy

    RP McMurphy

    Joined:
    Feb 9, 2003
    Messages:
    91
    Whoops, you beat me to it brendandonhu while I was gathering my links :D
     
  12. Mosaic1

    Mosaic1

    Joined:
    Aug 17, 2001
    Messages:
    7,486
    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
     
  13. Tarnishedwisdom

    Tarnishedwisdom Thread Starter

    Joined:
    Mar 8, 2002
    Messages:
    108
    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?
     
  14. Mosaic1

    Mosaic1

    Joined:
    Aug 17, 2001
    Messages:
    7,486
    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.
     

    Attached Files:

    • top.txt
      File size:
      2.2 KB
      Views:
      139
  15. Mosaic1

    Mosaic1

    Joined:
    Aug 17, 2001
    Messages:
    7,486
    Here's the screenshot.
     

    Attached Files:

    • top.gif
      top.gif
      File size:
      25.3 KB
      Views:
      126
  16. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/118682

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice