Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts

    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 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
    Regular Coder Taro's Avatar
    Join Date
    Oct 2011
    Location
    Geraldton, Ontario
    Posts
    155
    Thanks
    1
    Thanked 1 Time in 1 Post
    Hello gib65,

    Did you try testing the code multiple times? I copied and tested the coding myself and did not see a problem with the alignment; changing the border should not have any affect on the property.

    But there is a chance that even changing the thickness of the border can cause your arrangements of the segments to disarrange themselves. For example, if your container is 300 x 300 pixels, your banner must be a maximum of 300 pixels. Adding a border can add pixel thickness, therefore exceed the container limit and causing displaying errors to appear on your webpage. You can decrease the size of your table and allow room for a border.

    Also, you can try using an external CSS style sheet; you'll have less problems working with the coding, having all HTML pages abide by the style rules. Hope these helps.
    Last edited by Taro; 02-16-2012 at 08:59 PM. Reason: forgot something
    Element ID

    Webs Support Helper

    Your friendly neighborhood Taroman.

  • #3
    New Coder
    Join Date
    Sep 2011
    Location
    United Kingdom
    Posts
    72
    Thanks
    2
    Thanked 3 Times in 3 Posts
    Maybe the position of the banner div is distorted, The browser tries to displays the table and the banner div next to each other (After you take a pixel off ) In that case have a look at THIS or try to add this to your banner CSS
    Code:
     clear: both;
    Or it is some conflicting CSS. You should put your CSS style into a proper
    Code:
     <style type="text/css"> ....</style>
    in you header. It is good practice ! Have a look at this tutorial: http://www.w3schools.com/css/.
    Last edited by clausrei; 02-16-2012 at 09:04 PM. Reason: mistakes

  • #4
    New Coder
    Join Date
    Nov 2011
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Taro,

    Thanks but it's shift by way too much to be the difference between border/no border.

    clausrei,

    I'm not using divs. It's just an img in a table cell.

    I put all my CSS in the header and it's till shifting.

    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

  • #5
    Regular Coder Taro's Avatar
    Join Date
    Oct 2011
    Location
    Geraldton, Ontario
    Posts
    155
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by gib65 View Post
    Taro,

    Thanks but it's shift by way too much to be the difference between border/no border.

    clausrei,

    I'm not using divs. It's just an img in a table cell.

    I put all my CSS in the header and it's till shifting.

    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
    Hello gib65,

    Based on the links you posted, I actually don't see any abnormal shifts. Could the problem now be the web browser you were using? Different browsers have different compatibilities when reading the codes of certain webpages. This is what I see on Mozilla Firefox:
    Attached Thumbnails Attached Thumbnails table border problem-border%3D0.jpg   table border problem-border%3D1.jpg  
    Element ID

    Webs Support Helper

    Your friendly neighborhood Taroman.

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    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
    ☠ ☠RON☠ ☠

  • #7
    New Coder
    Join Date
    Nov 2011
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks everyone,

    The problem WAS that the banner didn't fit within the predefined dimensions of the table once borders were set to 0. What I wasn't expecting was that it would be shifted according to it's own discretion in that case.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Quote Originally Posted by gib65 View Post
    What I wasn't expecting was that it would be shifted according to it's own discretion in that case.
    Well the exact size of the columns and rows in a table is supposed to be dependent on the size of the tabular data it contains. You don't want the data getting chopped off because one piece of data is bigger than the rest. So it makes perfect sense for tables to restructure themselves to fit the data they contain in a way that wouldn't make sense outside of a table.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem WAS that the banner didn't fit within the predefined dimensions of the table once borders were set to 0.
    http://www.loksewaexam.com


  •  

    Posting Permissions

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