SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru puco's Avatar
    Join Date
    Feb 2005
    Location
    Slovakia
    Posts
    785
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Table width problem in FF

    Hi,

    I have problem with following page:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <style>
    td, th { padding: 0 }
    </style>
    </head>
    <body>
    
    <table style="width: 100%; border-collapse: collapse; table-layout: fixed">
    <tr>
    	<td></td>
    	<td style="width: 726px; background: #ff7">header<br/>header<br/>header</td>
    	<td></td>
    </tr>
    </table>
    
    <table style="border-collapse: collapse; width: 726px; margin: 0px auto; border: solid 1px red"">
    <tr>
    	<th style="width: 179px; background: #fef">Left</th>
    	<td>Main</td>
    </tr>
    </table>
    
    </body>
    </html>
    I want to achieve that the border of bottom table is inline with the header (yellow) section (see picture). In IE6/Opera this looks good but in FF (1.0) the table is 725px wide (even when it is set to 726px) and that produces a shift.

    Do you know how to correct this?
    Attached Images Attached Images
    Martin Pernecky

  2. #2
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im not 100% sure Im seeing the problem you are BUT I did notice some mistakes in your code:

    1. no type for your style tag (IE: type='text/css')
    2. You should also add the opening and closing comment tags inside your style block

    3. Found this little gremlin by shear luck:

    <table style="border-collapse: collapse; width: 726px; margin: 0px auto; border: solid 1px red"">

    Notice the extra " at the end!

    4. and the valdator was SCREAMING about your closing head tag because (I think) you had no title tag in it ... when I added a title it stopped screaming.

    But again IM not 100% sure I know exactly what you "border " problem is .. maybe these tired old eyes just arent seeing it! Then again that image you attached is just a TAD small (dont have a microscope handy )

    OH and BTW, for proper validation you should add a content-type meta tag, it has nothing to do with your problem but it really should be there

  3. #3
    SitePoint Zealot jplatenius's Avatar
    Join Date
    Nov 2003
    Location
    Vancouver Island, Canada
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i can't see a difference... attached screen shot from ff 1.0 and ie 6.0.2
    Attached Images Attached Images

  4. #4
    SitePoint Guru puco's Avatar
    Join Date
    Feb 2005
    Location
    Slovakia
    Posts
    785
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, second try, completly valid and with big screenshots, 1.gif is FF (incorrect), 2.gif is IE (correct).

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>Border test</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body style="margin: 0; padding: 0">
    
    <table style="width: 100%; border-collapse: collapse; table-layout: fixed">
    <tr>
    	<td></td>
    	<td style="width: 50px; background: #f22; padding: 0">H</td>
    	<td></td>
    </tr>
    </table>
    
    <table style="border-collapse: collapse; width: 50px; margin: 0 auto; border: solid 1px red">
    <tr>
    	<td style="padding: 0">M</td>
    </tr>
    </table>
    
    </body>
    </html>
    Attached Images Attached Images
    Martin Pernecky

  5. #5
    SitePoint Zealot jplatenius's Avatar
    Join Date
    Nov 2003
    Location
    Vancouver Island, Canada
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'll have a look when the attachments come through...


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
  •