www.webdeveloper.com
Results 1 to 10 of 10

Thread: [RESOLVED] table border problem

  1. #1
    Join Date
    Apr 2005
    Posts
    35

    resolved [RESOLVED] table border problem

    Hello,

    I have the following HTML:

    Code:
    <html>
    
    <head>
    </head>
    
    <body>
    
    <table style="height: 100%;" cellspacing=0 cellpadding=0 border=1>
    
    <tr><td colspan=2 style="height: 100px; text-align: center;">
    <span style="font-size: 24px;">
    <img src="H&R banner.jpg" border=0></span></td></tr>
    
    <tr>
    
    <td style="width: 200px; padding-top: 10px; text-align: center;">
    <iframe style="width=100%; height: 100%;" src="news.html" scrollable=yes frameborder=no></iframe>
    </td>
    
    <td style="width: 530px;">
    <table style="width: 100%; height: 100%" cellspacing=0 cellpadding=0 border=0>
    
    <tr>
    <td style="height: 50px; background: url('menu_bg.jpg'); text-align: center;">
    
    <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 style="text-align: center;">
    <iframe style="width: 100%; height: 100%;" src="content.html" srollable=yes frameborder=0></iframe>
    </td>
    </tr>
    
    </table>
    </td>
    
    </tr>
    </table>
    
    </body>
    </html>
    The line in bold is causing me trouble.

    If I change border=1 to border=0, suddenly my table goes all out of wack. The banner at the top (H&R banner.jpg) all of a sudden shift about 20 pixels to the right becoming misaligned with everything else in the table.

    Does anyone know why this is?

  2. #2
    Join Date
    Apr 2005
    Posts
    35
    I uploaded the page to these two sites so that you can see what I mean:

    http://www.shahspace.com/border1/ <-- border=1
    http://www.shahspace.com/border0/ <-- border=0

  3. #3
    Join Date
    Aug 2005
    Posts
    17
    Hmm, that is strange!

    It's almost as if your parameters are so tight, that the 1 pixel border is kicking things out (but would expect it to happen in reverse, not by removing the frame border ... interesting.

    Just one suggestion, try aligning your whole document 'centered' and see if the same result occurs with 0,1 pixel borders?

    Hope this is some help, but I'm no expert by any means, sorry.

    All the best,
    Siv

  4. #4
    Join Date
    Aug 2005
    Posts
    17
    .. also worth experimenting with:

    <body leftmargin=0 topmargin=0>

    see what is produces with "border=0"

    All the best,
    Siv

  5. #5
    Join Date
    Nov 2002
    Posts
    2,632
    This seems to work fine in FF and Chrome and is only an issue in IE.

    Other things of note...
    - You honestly shouldn't be using tables for a layout anyway.
    - You need to make sure your page validates(http://validator.w3.org/) Your zero border example came up with 12 errors and 5 warnings.
    - Your CSS should be linked externally. Content should be separated from presentation.
    - Make sure to be consistent with double quoting values.
    - Using iframes was a pet peeve of mine even 8-10 years ago. I can't imagine using them these days. Display "x" amount of content like news, and if you want people to look at more, simply give them a link to go look at more of the specified content.

  6. #6
    Join Date
    Feb 2012
    Location
    Australia
    Posts
    2
    I agree with spufi, you go for FF or Chrome rather than IE.

  7. #7
    Join Date
    Feb 2012
    Posts
    61
    Hi,
    we need to remove "text-align: center;" on following class

    td.banner {
    height: 100px;
    text-align: center;
    }


    it works in all browsers.............hope it will be helpfull

    Thanks,
    Som.

  8. #8
    Join Date
    Nov 2002
    Posts
    2,632
    Quote Originally Posted by yuranga View Post
    I agree with spufi, you go for FF or Chrome rather than IE.
    You code for all browsers.

  9. #9
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    Best to do a table layout using a separate CSS file or at least embedded CSS. Might try:

    Code:
    <table style="table-layout: fixed; width: XXXpx; margin: 0 auto; padding: 0; border-collapse: collapse; border: 1px solid #c0c0c0;" summary="">
    Always tell browsers what you want them to do.

    Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design
    Why tables for layout is stupid: http://www.hotdesign.com/seybold/
    How to convert manually your HTML tables to CSS: http://www.table2css.com/articles/ho...tml-tables-css
    Basic Tables [Bad Examples!]: http://www.yourhtmlsource.com/tables/basictables.html
    Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Ima...ysterious_Gaps

  10. #10
    Join Date
    Apr 2005
    Posts
    35
    The problem turned out the be the table size after all - without borders, the table is too small to contain the banner. I just wasn't expecting such a big shift (it shifts it to where ever it wants if it doesn't fit).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles