SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Nottingham, UK
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 Table Layout Problem

    Hi,

    Much as I hate to do this I have cross-posted this here because I'm not getting any answers over in the HTML forum. Apologies for this.

    The following code renders fine in Firefox but doesn't work in IE6. It's supposed to be a table with one row containing two images and then the next row is split into three columns, two of which are 140px and the middle one is dynamic. If I remove the embedded table with the images in from the first row, it works. If I don't it renders the column widths incorrectly.

    Can anyone help? This is really holding me up now
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    <html dir="ltr" lang="en"> 
    <head> </head> 
    <body> 
    <table border="1" cellpadding="0" cellspacing="0" width="100%"> 
    <tr>  
    	<td colspan="3" align="left">
    		 <table border="0" cellpadding="3" cellspacing="3" width="600px">
               			<tr>
                       			<td width="200px"><img src="logo.png" border="0" height="82" width="200"></a></td>
                        			<td width="400px"><img src="welcome.png" border="0" height="41" width="400"></td>
                			</tr>
            		</table>
    	</td> 
    </tr> 
    <tr>  
    	<td width="140px">  
    		<table border="0" cellpadding="3" cellspacing="3" width="140px">  Left-hand side </table>  
    	</td>  
    	<td>  Middle section </td>  
    	<td width="140px">  
    		<table border="0" cellpadding="3" cellspacing="3" width="140px">  Right-hand side 
    		</table>  
    	</td> 
    </tr> 
    </table> 
    </body>
    </html>

  2. #2
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Get rid of your px in your width definitions. For instance <td width="400px"> should be <td width="400">. Units of measure are only used in CSS not pure html. This would probably help your situation. I have found that with some browsers, unless there is substance that would push your center column to the full possible width, they will leave the center cell narrow and make your third cell really wide in spite of your instructions.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Nottingham, UK
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for replying. Unfortuantely that hasn't made any difference. I'm sure it's something to do with the embedded table in the first row because if I take out the images it works fine.

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Nottingham, UK
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's something interesting I found. If I strip down the code in the first row to the following, it works OK.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    <html dir="ltr" lang="en"> 
    <head> 
    <title>Column Test</title>
    </head> 
    <body> 
    <table border="1" cellpadding="0" cellspacing="0" width="100%"> 
    <tr>  
    	<td colspan="3" align="left">
    		 <img src="logo.png" border="0" height="82" width="200">
    	</td> 
    </tr> 
    <tr>  
    	<td width="140">  
    		<table border="0" cellpadding="3" cellspacing="3" width="140"><tr><td>Left-hand side</td></tr></table>  
    	</td>  
    	<td>  Middle section </td>  
    	<td width="140">  
    		<table border="0" cellpadding="3" cellspacing="3" width="140"><tr><td>Right-hand side</td></tr> 
    		</table>  
    	</td> 
    </tr> 
    </table> 
    </body>
    </html>
    But if I add the second image back into the first row, the column widths go wrong again. It's obviously something to do with the image widths but I'm not sure what.

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Nottingham, UK
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still not getting anywhere with this. Could it be related to the DTD I'm using?

  6. #6
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by spib
    Still not getting anywhere with this. Could it be related to the DTD I'm using?

    No, in reality, you shouldn't be using tables for site layout. They are supposed to be used for tabular data. Site layout should be controled by CSS using DIV tags.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Nottingham, UK
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm well ware of that but this is a legacy site which I am modifying and so I'm in no position to change it. Believe me, I would if I could.

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Nottingham, UK
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, after searching around on the web some more I have identified a fix for this. Adding a column definition to the table before the first row fixes it. See below

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    <html dir="ltr" lang="en"> 
    <head> 
    <title>Column Test</title>
    </head> 
    <body> 
    <table border="1" cellpadding="0" cellspacing="0" width="100%"> 
    <colgroup>
    <col width="140" />
    <col width="*" />
    <col width="140" />
    </colgroup>
    <tr>  
    	<td colspan="3" align="left">
    		 <img src="logo.png" border="0" height="82" width="200"><img src="welcome.png" border="0" height="41" width="400">
    	</td> 
    </tr> 
    <tr>  
    	<td width="140">  
    		<table border="0" cellpadding="3" cellspacing="3" width="140"><tr><td>Left-hand side</td></tr></table>  
    	</td>  
    	<td>  Middle section </td>  
    	<td width="140">  
    		<table border="0" cellpadding="3" cellspacing="3" width="140"><tr><td>Right-hand side</td></tr> 
    		</table>  
    	</td> 
    </tr> 
    </table> 
    </body>
    </html>
    This comes from the discussion at http://www.webmasterworld.com/forum21/8455.htm

    Thanks for your time


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
  •