Results 1 to 4 of 4

Thread: table borders

  1. #1
    Mike Fishcake
    Guest

    table borders

    It's the old "works in one browser, but not the other" scenario.

    I have this page here: http://www.railtrail.co.uk/2006/fares-table.htm

    Which looks fine in FF, but in IE, there's a gap between the image and the table. I've played around with cell padding, I've had the graphic in as a cell, and as a caption, but I still can't get it to bloody display properly.

    Screenshot from what I can see on my PC:



    And the code is

    Code:
    <style type="text/css">
    table.one
    {
    border-style: solid;
    border-color: #98012e
    }
    td.one
    {
    border-style: solid;
    border-color: #98012e
    }
    </style>
    
    
    </head>
    
    <body>
    
    <img src="farestab.gif" width="123" height="30" border="0">
    <table class="one" width="250" border="1" cellpadding="1" cellspacing="0">
      <tr>
        <td class="one">help</td>
        <td class="one">why</td>
        <td class="one">isn't</td>
      </tr>
      <tr>
        <td class="one">this</td>
        <td class="one">working</td>
        <td class="one">properly</td>
      </tr>
      <tr>
        <td class="one">you</td>
        <td class="one">&nbsp;</td>
        <td class="one">&nbsp;</td>
      </tr>
    </table>
    Ideas anyone? :S

    I appreciate the code is scrappy at the moment, but i'm just trying to get the design right first.

  2. #2
    Flak Monkey! Dorza's Avatar
    Join Date
    Jul 2003
    Location
    UK - South Wales
    Posts
    1,762
    Thanks
    34
    Thanked
    17 times in 15 posts
    • Dorza's system
      • Motherboard:
      • Asus P5B Deluxe - WiFi
      • CPU:
      • Q6600 @ 3.06Ghz
      • Memory:
      • 2GB Crucial
      • Storage:
      • 500GB Samsung SpinPoint
      • Graphics card(s):
      • Geforce 9600GT
      • PSU:
      • Cosair HX520W
      • Case:
      • LianLi something something or other
      • Monitor(s):
      • Eizo FlexScan S1910 (1280*1024)
      • Internet:
      • 2mb Virgin (when they want to give me that: else 1mb)
    This is what i got (though i have to say theres probably a simpler way to do it, which someone will probably post. I dont use CSS on tables very often).

    Code:
    <html>
    
     <head>
    
      <style type="text/css">
    
       table.one { border:0; width:123px; }
    
       td.top { border-top:2px solid #98012e; }
    
       td.bottom { border-bottom:2px solid #98012e; }
    
       td.left { border-left:2px solid #98012e; }
     
       td.right { border-right:2px solid #98012e; }		
    
      </style>
    
     </head>
    
    <body>
    
     <table class="one" cellpadding="0" cellspacing="0">
    
      <tr>
       <td><img src="farestab.gif" alt="farestab" title="farestab" /></td>
      </tr>
     
      <tr>
       <td class="top left">help</td>
       <td class="top left">why</td>
       <td class="top left right">isn't</td>
      </tr>
      
      <tr>
       <td class="top left">this</td>
       <td class="top left">working</td>
       <td class="top left right">properly</td>
      </tr>
    
      <tr>
       <td class="top bottom left">you</td>
       <td class="top bottom left">&nbsp;</td>
       <td class="top bottom left right">&nbsp;</td>
      </tr>
     
     </table>
    
    </body>
    
    </html>
    Last edited by Dorza; 03-10-2005 at 11:43 PM.

  3. #3
    Mike Fishcake
    Guest
    Ahhhh... seems so obvious now. Cheers!

  4. #4
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    Also something to note, IE will sometimes decide that a carriage return in your code should equate to a space on the layout between elements. If you're getting a space between two elements and can't work out why remove the carriage return so the code sits on one line and see if that helps. Another stroke of genius by Microsoft.

    I would stick with your original CSS as it's a more manageable format than the one Dorza has kindly given you. Something simple like

    Code:
    <head>
    <style type="text/css">
    table.one { width: 250px; }
    table.one td { border: 2px solid #98012e; padding: 1px; }
    </style>
    </head>
    
    <body>
    <img src="farestab.gif" width="123" height="30" border="0"><table class="one">
      <tr>
        <td>help</td>
        <td>why</td>
        <td>isn't</td>
      </tr>
      <tr>
        <td>this</td>
        <td>working</td>
        <td>properly</td>
      </tr>
      <tr>
        <td>you</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </body>

Thread Information

Users Browsing this Thread

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

Similar Threads

  1. The eternal search for the perfect coffee table
    By Parm in forum SHOPPING AND CLASSIFIEDS
    Replies: 2
    Last Post: 26-07-2005, 05:01 PM
  2. Boot sector and partition table
    By littlewill in forum Software
    Replies: 4
    Last Post: 20-07-2004, 07:49 PM
  3. Replies: 8
    Last Post: 21-05-2004, 09:58 PM
  4. Ideas on how to cover a table...
    By Lead_Head in forum General Discussion
    Replies: 15
    Last Post: 18-04-2004, 07:41 PM
  5. Not displaying sig pictures stretches table
    By Paul Adams in forum HEXUS Suggestions
    Replies: 0
    Last Post: 21-09-2003, 11:08 AM

Posting Permissions

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