none
IE9 table layout apparently affected by whitespace between HTML elements

    Question

  • I'd appreciate help debugging a web page. The page displays OK in FF4 and Chrome10, but not in IE9. Strangely, the layout of a table seems to depend on the number of whitespace lines between </td> and <td>. In theory, it ought not matter how much whitespace is between block elements, right? But the table display changes when blank lines are removed.

    The display changes when other aspects of the file change too. I suspect malformed HTML (it's an old and odd page), but it passes all validators I've tried (and it displays correctly in FF/Chrome and prev versions of IE). In any case, why would removing blank lines between blocks affect things?

    It's as if IE9's internal data structures are getting messed up.

    If this intrigues you, have a look at http://www.ncf.ca/ncf/support/ie9_issue for more info about the problem, and the page's HTML.

    This was run on Win7 using IE9, FF4, Chrome10, all believed to be up to date.

    Friday, April 08, 2011 2:15 PM

All replies

  • I've been seeing a similar problem with extra white space between td nodes causing IE9 render a dynamically generated table incorrectly, in my case to misalign a cell within a table.  All worked fine in IE6, IE7, IE8, FireFox 4, Chrome 10, but not IE9. 

    In IE9 I would see something like this (where an 'X' represents a table cell):

    XXXXXXXX

    XX XXXXXX    <-- missing cell in spot 3, extra cell at end of row

    XXXXXXXX

    XXXXXXXX

    XXXXX XXX    <-- missing cell in spot 6, extra cell at end of row

    The location of the missing cell seemed to be randomly generated by IE9.  

    Once I took out some carriage returns and spaces out of much of the generated table html, IE9 began to behave somewhat better, but the problem didn't go away completely (it would just show up with less frequency).

    Anyway, my particular problem was completely resolved when I declared the page to be IE8 compatible using the following meta tag:

    <meta http-equiv="X-UA-Compatible content="IE-EmulateIE8" >

    I'm not sure of the full ramifications of adding this meta tag, but all seems to work fine in all browsers I've tested (IE6/7/8/9, FF4, Chrome10).

    It might work in your scenario as well if you're looking for a quick fix.

     

    Friday, April 29, 2011 2:44 PM
  • Hi David,

     

    I'm having a similar issue as what you describe.  I put in the <meta> tag you suggested (though I changed IE-EmulateIE8 to IE=EmuilateIE8) and I'm still having the same problem.  I wonder what the difference is.

     

    Thanks,

    Seth

    Friday, April 29, 2011 6:47 PM
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <title>IE puzzle</title>
    
    <style type="text/css">
    .log td {padding-left: 0.3em; padding-right: 0.3em}
    .log a {color: black; text-decoration: none}
    .log a:hover {text-decoration: underline}
    .func a {text-decoration: none}
    .tight p {margin-bottom: 0.5em}
    .content ul {padding-left: 8px; margin-left: 8px}
    .content li {margin-bottom: 0.5em}
    .norm {background-color: gainsboro}
    .grn {background-color: palegreen}
    .yel {background-color: palegoldenrod}
    .red {background-color: pink}
    table.bc {border-collapse: collapse}
    .label {text-align: right;}
    </style>
    
    <script type="text/javaScript">
    <!--
    var prevIndex = 0;
    function selectAll (field, newSetting)
    {
     if (!field.length) // if there is only one, no array so field.length undefined
      field.checked = newSetting;
     else
      for (var i=0; i < field.length; i++)
       field[i].checked = newSetting;
     return false;
    }
    function clk(event, chkIndex)
    {
     if (event.shiftKey) {
      if (prevIndex > chkIndex)
       for (var i = chkIndex; i <= prevIndex; i++)
        document.entryForm.SelectMsg[i].checked =
          document.entryForm.SelectMsg[prevIndex].checked;
      else
       for (var i = prevIndex; i <= chkIndex; i++)
        document.entryForm.SelectMsg[i].checked =
          document.entryForm.SelectMsg[prevIndex].checked;
     }
     prevIndex = chkIndex;
    }
    function doOpen(url, windowName) {
      var winWidth = 900;
      var winHeight = Math.round(screen.availHeight * 9 / 10);
      var top = Math.round((screen.availHeight - winHeight) / 2);
      var left = 10;
      var opts = 'height=' + winHeight + ',width=' + winWidth;
      if (document.layers)
        opts = opts + ',screenX=' + left + ',screenY=' + top; // netscape
      else 
        opts = opts + ',left=' + left + ',top=' + top;
      opts += ",resizable=yes,toolbar=no,location=no,menubar=no,directories=no,status=no";
      opts += ",scrollbars=yes";
      var win = window.open(url, windowName, opts);
    }
    -->
    </script>
    </head>
    <body style=
    "background-color: white; margin-top: 0; margin-left: 0; margin-right:0">
    
    <!-- HEADER -->
    <table bgcolor="#EEEEEE" border="0" cellspacing="0" cellpadding="0"
    width="100%">
    <tr>
    
    <td valign="middle" height="60"><a href="http://abc">a</a></td>
    <td style=
    "padding-right: 1em; vertical-align: middle; text-align: right">
    b</td>
    </tr>
    <tr>
    <td class="headerlinks" align="left" style="padding-left: 1em">
    c</td>
    <td class="headerlinks" align="right">g | d | d</td>
    </tr>
    </table>
    <!-- End of HEADER -->
    <table border="0" cellspacing="12" cellpadding="0" width="100%">
    <tr>
    
    <td class="content" valign="top">
    <form style="margin-top: 0.5em; margin-bottom: 0; clear: both"
    name="entryForm" method="post" action="y.jsp" id="entryForm">
    <table width="100%" class="bc" cellpadding="0">
    <tr>
    <td><button type="submit" name="deliverSelected" value="1" style=
    "height: 36px; padding: 0 2px; overflow: visible; cursor: pointer; background-color: #d4d0c8">
    <table>
    <tr>
    <td valign="middle"><img src="emailIcon.png" alt=''></td>
    <td valign="middle"><b>Deliver</b>&nbsp;selected&nbsp;items</td>
    </tr>
    </table>
    </button></td>
    <td>
    <table class="bc" cellpadding="0">
    
    <tr>
    <td><button type="submit" name="discardSelected" value="1" style=
    "height: 36px; padding: 0 2px; overflow: visible; cursor: pointer; background-color: rgb(250,100,100); border-color: rgb(250,100,100)">
    <table width="180">
    <tr>
    <td valign="middle"><img src="trashCanRed.png" alt=''></td>
    <td valign="middle"><b>Discard</b>&nbsp;selected&nbsp;items</td>
    </tr>
    </table>
    </button></td>
    <td style="padding-left: 1em"><a href="der" title=
    "Restore previously discard mail">Restore</a></td>
    </tr>
    </table>
    </td>
    
    <td align="right" valign="middle"><span style=
    "padding-left: 5em">a</span></td>
    </tr>
    </table>
    <table align="center" width="100%" cellpadding="0" border="1">
    <col width="1%" align="right" class="norm">
    <col align="left" valign="top">
    <col align="left" valign="top">
    <col width="1%" align="center" valign="top" class="norm">
    <col width="1%" align="center" valign="top" class="norm">
    <tr bgcolor="white">
    <td colspan="2" valign="bottom" align="left">xxxxxxxxxxxxxx
    xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxxxxxxxxxxx
    xxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx</td>
    <th valign="bottom" align="left">Subject</th>
    <th valign="bottom">Size</th>
    
    <th>Spam<br>
    Score</th>
    </tr>
    <tr class="log">
    <td nowrap>a</td>
    <td class="yel">b</td>
    <td class="yel">c</td>
    <td>1K</td>
    <td>1.7</td>
    </tr>
    
    </table>
    </form>
    </td>
    </tr>
    </table>
    <!-- Piwik Tag -->
    <script type="text/javascript">
    var pkBaseURL = "/piwik/";
    document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
    </script><script type="text/javascript">
    try {
    var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 6);
    piwikTracker.trackPageView();
    piwikTracker.enableLinkTracking();
    } catch( err ) {}
    </script><noscript>
    <p><img src="/piwik/piwik.php?idsite=6" style="border:0" alt=
    ""></p>
    </noscript><!-- End Piwik Tag -->
    </body>
    </html>
    
    @Baffin,

    a <form> tag within a <td> is not valid markup...

    <table border="0" cellSpacing="12" cellPadding="0" width="100%">
    <tbody><tr>
    
    <td class="content" vAlign="top">
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <form style="clear: both; margin-top: 0.5em; margin-bottom: 0px;" method="post" name="entryForm" action="y.jsp">
    
    
    
    <table class="bc" cellPadding="0" width="100%">
    <tbody><tr><td><button style="padding: 0px 2px; height: 36px; overflow: visible; cursor: pointer; background-color: rgb(212, 208, 200);" name="deliverSelected" type="submit" value="1"><table><tbody><tr><td vAlign="middle"><img alt="" src="emailIcon.png"></td><td vAlign="middle"><b>Deliver</b>&nbsp;selected&nbsp;items</td></tr></tbody></table></button></td>
    <td><table class="bc" cellPadding="0"><tbody><tr><td><button style="border-color: rgb(250, 100, 100); padding: 0px 2px; height: 36px; overflow: visible; cursor: pointer; background-color: rgb(250, 100, 100);" name="discardSelected" type="submit" value="1"><table width="180"><tbody><tr><td vAlign="middle">
    <img alt="" src="trashCanRed.png"></td><td vAlign="middle">
    <b>Discard</b>&nbsp;selected&nbsp;items</td></tr></tbody></table></button>
    </td><td style="padding-left: 1em;"><a title="Restore previously &#13;&#10; discard mail" href="der">Restore</a></td></tr></tbody></table>
    </td><td vAlign="middle" align="right">
    
    <span style="padding-left: 5em;">a</span>
    
    </td>
    </tr></tbody></table>
    
    
    
    It passes the w3c validator because you are using the loose DTD....(also the Validators are human engineered .... nothings falt proof)

    Running in FX and using the Tidy HTML validator, the DTD is changed to HTML 4.... (Chrome and Safari do this also)..

    Your page, like Davids, is missing character encodings..

    No Character encoding declared at document level

    No character encoding information was found within the document, either in an HTML meta element or an XML declaration. It is often recommended to declare the character encoding in the document itself, especially if there is a chance that the document will be read from or saved to disk, CD, etc.

    See this tutorial on character encoding for techniques and explanations

    HTH...

    Regards.

     


    Rob^_^
    Friday, April 29, 2011 11:44 PM
  • I am having the same issue.

    So far, it appears to be with dynamically generated tables only. Both of the fixes proposed by David_2020 worked for me, but we can't use the meta tag approach in our site. In the final analysis, I will just use a RegExp to strip all the whitespaces before writing the HTML to the page. I am concerned about David_2020's statement that this wasn't a 100% fix... I haven't been able to test in enough situations to determine if this will be the case for me or not.

    RegExp I am using is like this: 

    var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
    tableHtml = tableHtml.replace(expr, '><');

    Seems to work so far.

    [Edit: Just hit a case where stripping out the WS doesn't help. Ugh.]
    [Edit-edit: There was another string that needed similar treatment. It's working now.]
    • Edited by R014ndu$ Thursday, May 12, 2011 10:14 PM update
    • Proposed as answer by Charlie Shen Wednesday, June 22, 2011 3:54 PM
    Thursday, May 12, 2011 9:24 PM
  • I am seeing the same issue with large ajax tables, so far the white space RegExp seems to work, thanks for that.


    This is clearly a MS bug. I've seen links to official reports in other threads but those links seem to be broken. Does anyone know of an official response to this one?

    Thursday, May 19, 2011 5:04 PM
  • Thanks a lot..Its working fine with larger table also....
    Thursday, October 20, 2011 7:05 AM
  • Baffin posted about this bug 7 months ago... that's a long time in "internet years".  I've seen no info on an actual fix, just workarounds.  I suspect that MS has internally encountered the issue of whitespace causing the table display bug... and stripping appears to mitigate the issue.  I'm highly disappointed that there has been no patch to fix the problem.

    Tuesday, November 08, 2011 8:10 PM
  • We are also affected by this bug.

    The Table is OK, but if we apply a "fixedHeader" Jquery processing, the Table is garbled.

    Works OK in compatibility mode and in any other browser.

    Wednesday, November 16, 2011 3:39 PM
  • A lot of thanks!
    Thursday, February 09, 2012 8:23 AM
  • Hi,

    which version of jQuery?

    use a CDN jQuery library to ensure you are always using the latest version....

    1.8 is the latest version.... new versions are release as bugs are found or enhancements are made.


    Rob^_^

    Thursday, February 09, 2012 12:58 PM
  • I have implemented the whitespaces replacing approach, but all the Dropdownlist isnide the div or table seems to broke up. They are not expanding anymore.

    Any idea?

    Thanks to All!


    • Edited by Guille.NET Tuesday, June 19, 2012 11:13 PM
    Tuesday, June 19, 2012 7:47 PM
  • @Guklle.NET

    first validate your markup (validator.w3.org) and correct any errors/warnings then post back with a link to your website.


    Rob^_^

    Tuesday, June 19, 2012 9:24 PM
  • I am facing the same issue (only in IE9) when the table is created dynamically, by using innerHTML to render the table.
    An ajax call provides me the HTML for rendering the table, which is inserted into a DIV using innerHTML.

    I have put up a simplified example here (HTML is created in the page itslef, instead of fetching through ajax):
    http://jsfiddle.net/kiranmn/kYRnV/4/embedded/result/

    Avoiding white spece before and after TD elements solved the issue, but this has made my velocity template unreadable.

    Another solution is to use the RegEx to avoid the white spaces (suggested in this thread), which might slow down page rendering for large tables.

    Wating for a better solution!!!

    Monday, July 30, 2012 12:00 PM
  • So, I previously fixed my issue by removing white spaces between <td></td><td></td>, but recently the issue cropped up again in the same table.

    I had the following comment being inserted after every table row in a loop from a PHP file:

    </tr> <!-- end row wrapper -->

    I removed the comment and the white space after the </tr> and the table is fixed.

    Wednesday, September 05, 2012 8:00 AM
  • It's a little late, but just incase someone else finds this thread;

    Recently I upgraded a very large internal facing web app from IE8 to IE9.  Not only does this app use tables to display data it uses tables for all of it's HTML page layout so there were many many nested tables into nested iframes.  Change one <td> value and it would throw everything off.  Before tables render, the browser will often make multiple passes in order to assign a width to nested <td>s so I helped it out by putting a <span> inside the <td> w/ a predetermined width and set it to an inline block.  It solved MANY of my problems!!

    for example:    <td><span id="custInfoTableTD5" style="display:inline-block; width:100px;">Detail Stuff Here</span></td>

    Monday, May 12, 2014 11:05 PM