SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,937
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layouts behaving badly

    I have this problem and I cannot fix it. My layout is behaving badly. It shouldn't be doing what its doing but I can't stop it.

    http://www.thebeasleys.org/temp/Noname3.html

    I have made oddly textured images so that you can see whats going on.

    Picture A has a height of 81 pixels. However the transparent gif in the cell that Picture A is a background for can only have a height of 77 pixels or it will cause the cell to stretch. Why? I have no idea. Its like its ignoring my cellpadding settings. Go ahead, experiment. Change the height to 81 pixels.

    Another odd thing is the second row in the table. Picture B and C have heights of 39 Pixels, the table has a height of 39 pixels, yet there is a pink bar (generated by the table's background color) below the pictures. Its like above, for some reason there is a couple pixel cell padding on the bottom of my cells that I cannot get rid of.

    I'm using IE 6 on Win2k, tested it on two computers with the same settings. Also tested it with mozilla (it works with mozilla).

    Is this some stupid IE 6 bug I've come across or what? Its extremely annoying.
    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums

  2. #2
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Well its not an IE 6 bug

    I'm seeing it in IE 5.5 too.

    I went through and reformatted the code removing line breaks etc. & the problem seems to have gone away:

    Code:
    <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
    <!-- saved from url=(0044)http://www.thebeasleys.org/temp/noname3.html -->
    <html>
    
    <head>
    </head>
    
    <body leftmargin=0 topmargin=0 marginwidth="0" marginheight="0">
    <table cellspacing=0 cellpadding=0 width=779 border=0>
      <tbody>
      <tr>
        <td width=779 background=aspentableprob_files/top2.jpg><img height=77 src="transparent.gif" width=779 border=0></td>
      </tr>
      <tr>
        <td height=39>
          <table height=39 cellspacing=0 cellpadding=0 bgcolor=pink border=0>
            <tbody>
            <tr>
              <td width=143 height=39><img src="mid_left2.jpg"></td>
              <td><img src="menu2.jpg"></td>
            </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td valign=top bgcolor=blue height=186>
          <table height=186 cellspacing=0 cellpadding=0 border=0>
            <tbody>
            <tr>
              <td valign=top width=186 height=186>
                <table cellspacing=0 cellpadding=0 border=0>
                  <tbody>
                  <tr>
                    <td valign=top width=186 background=bottom_left.jpg height=186>login: </td>
    	      </tr>
    	      </tbody>
                </table>
              </td>
              <td valign=top align=left width=593>content</td>
            </tr>
            </tbody>
          </table>
        </td>
      </tr>
      </tbody>
    </table>
    
    </body>
    
    </html>
    HTH

  3. #3
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy radiating mmy displeasure

    I try to make a habit of closing TD's on the same line - this seems to be the only HTML advice I can offer in this forum that's worth anything - and now this radioactive member has beaten mme to the punch

  4. #4
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "radioactive member"



    think about it for a minute...

  5. #5
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,937
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: radiating mmy displeasure

    Originally posted by mmi
    I try to make a habit of closing TD's on the same line - this seems to be the only HTML advice I can offer in this forum that's worth anything - and now this radioactive member has beaten mme to the punch

    I do too, but when you have more than one line I content I do

    <td>
    content
    </td>

    And in this case there is more than one line of content, its just that I removed all extra stuff to showcase the layout bug.

    I don't know how its fixed, but it is fixed. Isotope removed the quotes, which isn't allowed under xhtml - but I put them back and it's still fixed. He also added those optional tbody tags, removed them and its still fixed.

    I made this page that uses a frame and shows the two side by side. I'd like to know why its fixed, I can't explain it.

    http://www.thebeasleys.org/temp/
    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums

  6. #6
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,937
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know the problem it is the line breaks.

    Thats crap though, Line Breaks are not rendered in HTML.

    <td><img src = "menu.jpg" usemap="#menu.jpg" border = "0"></td>

    Shows no line

    <td><img src = "menu.jpg" usemap="#menu.jpg" border = "0">
    </td>

    shows line.


    I removed all \n's and \t's from the section in the table cell (and its long) and it works. How stupid is that?

    You know what my table cell looks like now:

    Code:
    <td><div id = "menu0" class = "div2"  height = "39"><img src = "text2.png" usemap="#menu.jpg" border = "0"></div><div id = "menu1" class = "div1"  height = "39"><img src = "menu1.jpg" usemap="#menu.jpg" border = "0"></div><div id = "menu2" class = "div1"  height = "39"><img src = "menu2.jpg" usemap="#menu.jpg" border = "0"></div><div id = "menu3" class = "div1"  height = "39"><img src = "menu3.jpg" usemap="#menu.jpg" border = "0"></div><div id = "menu4" class = "div1"  height = "39"><img src = "menu4.jpg" usemap="#menu.jpg" border = "0"></div><div id = "menu5" class = "div1"  height = "39"><img src = "menu5.jpg" usemap="#menu.jpg" border = "0"></div><div id = "menu6" class = "div1"  height = "39"><img src = "menu6.jpg" usemap="#menu.jpg" border = "0"></div><img src = "menu.jpg" usemap="#menu.jpg"  border = "0"></td>
    So much for readable code?
    Last edited by aspen; May 15, 2002 at 09:30.
    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums

  7. #7
    Degrading Gracefully PalmerB's Avatar
    Join Date
    Sep 2001
    Location
    Ohio - U.S.A. Outlook: Cautiously Optimistic
    Posts
    3,283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't have to go to the extreme and put all your code on one line. Just the <td> and </td>'s That should make everything hunky dory.

    One thing I always do when things aren't behaving is put the table border to 1 or 2 to see how things are being arranged. It couldn't hurt to try that.

    Palmer

  8. #8
    Degrading Gracefully PalmerB's Avatar
    Join Date
    Sep 2001
    Location
    Ohio - U.S.A. Outlook: Cautiously Optimistic
    Posts
    3,283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooops I see, you did only put one line in between the td's That's a long line

    One thing that causes problems with tables is the <div> tag. If I remember correctly it puts a break before and after the <div> because it's a block level tag. You should try <span> instead it doesn't make a break.

    Palmer

  9. #9
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,937
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the problem exists independent of the div tags.

    I could remove them and just put in the image and if there was a line break it'd still happen.
    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums

  10. #10
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could this be a doctype related issue? IE6 (and Mozilla and Opera for that matter) have two different rendering engines, one for "standards compatible" mode and one for "quirks" mode. Quirks mode is the default and renders things how people who don't use the standards wqould expect them to behave, while standards mode renders things according to the w3 standards. The doctype of a document controls which of these modes is used. From what you've said it sounds like this could be the reason for the strange behaviour.

    There is a good full explanation of this issue here: http://www.alistapart.com/stories/doctype/

  11. #11
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah, when I ran a check on that page, it spit out somethin' about not bein' happy with the doctype - dunno how to interpret those

  12. #12
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,937
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well the doctype on all those pages was:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    dont' see anything wrong with that.
    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums

  13. #13
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that enables "quirks" mode rather than standards mode - try changing it to this and see what happens:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    	   "http://www.w3.org/TR/html4/loose.dtd">

  14. #14
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,937
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nope, that doesn't fix the issue.
    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums

  15. #15
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  16. #16
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,937
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that soulds like the culprit.
    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums

  17. #17
    SitePoint Zealot GregShasta's Avatar
    Join Date
    Jul 2001
    Location
    atlanta ga
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try not using tables just use absolute positioning. Much easier.
    Greg
    'I guess that my ambition was to be a bum'--robert mitchum


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
  •