Results 1 to 3 of 3

Thread: table border trouble

  1. #1
    Join Date
    Jun 2008
    Posts
    107
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default table border trouble

    Hello,

    I'm having trouble with the bold line in the code below:


    Code:
    <html>
    
    <head>
    <title>H&R Properties</title>
    
    <style type="text/css">
    table.master
    {
    height: 100%;
    }
    
    td.banner
    {
    height: 100px;
    text-align: center;
    }
    
    span.banner
    {
    font-size: 24pt;
    }
    
    td.news
    {
    width: 200px;
    padding-top: 10px;
    text-align: center;
    }
    
    iframe.news
    {
    width: 100%;
    height: 100%;
    }
    
    td.menuandcontent
    {
    width: 530px;
    }
    
    table.menuandcontent
    {
    width: 100%;
    height: 100%;
    }
    
    td.menu
    {
    height: 50px;
    background: url('menu_bg.jpg');
    text-align: center;
    }
    
    td.content
    {
    text-align: center;
    }
    
    iframe.content
    {
    width: 100%;
    height: 100%;
    }
    
    
    </style>
    
    </head>
    
    <body>
    
    <table class="master" cellspacing=0 cellpadding=0 border=1>
    
    <tr><td colspan=2 class="banner">
    <span class="banner">
    <img src="H&R banner.jpg" border=0></span></td></tr>
    
    <tr>
    
    <td class="news">
    <iframe class="news" src="news.html" scrollable=yes frameborder=no></iframe>
    </td>
    
    <td class="menuandcontent">
    <table class="menuandcontent" cellspacing=0 cellpadding=0 border=0>
    
    <tr>
    <td class="menu">
    
    <table cellspacing=0 cellpadding=0 border=0>
    <tr>
    <td><img src="home.jpg" border=0></td>
    <td><img src="properties.jpg" border=0></td>
    <td><img src="about.jpg" border=0></td>
    <td><img src="contact.jpg" border=0></td>
    </tr>
    </table>
    
    </td></tr>
    
    <tr>
    <td class="content">
    <iframe class="content" src="content.html" srollable=yes frameborder=0></iframe>
    </td>
    </tr>
    
    </table>
    </td>
    
    </tr>
    </table>
    
    </body>
    </html>
    This code produced this: http://www.shahspace.com/border1/

    But if I do something as simple as set border to 0 in the bolded line above, I get this:

    http://www.shahspace.com/border0/

    The banner is all of a sudden shifted to the right by about 20 pixels. Why is this?

  2. #2
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,509
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    I'm not replying because I have an answer to your question, just letting you know something.
    You shouldn't use tables for the layout of your site. Try using <div> tags and css instead.

    Here's an article about it http://webdesign.about.com/od/layout/a/aa111102a.htm
    Last edited by keyboard; 02-16-2012 at 11:21 PM. Reason: Added bbcode

  3. #3
    Join Date
    Jun 2008
    Posts
    107
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thank you. That's actually very helpful.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •