none
IE9 DIV Height 100% with Rowspan not working? RRS feed

  • Question

  • In the following html markup, the height:100% seems to be ignored on the DIV tag.  I want it to stretch to the height of 2 rows, notice the rowspan=2 on the TD element.  How to I get IE9 to take the height into account?  Note: Sarafi and Chrome recognize the height and strect the DIV to 100% (I had to set the height on the table to get them to recognize it though..notice the height: 1%).  IE9 and FF4 ignore it.  Any suggestions?

    <!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">
    
    <head>
    
     <title></title>
    
     <style type="text/css">
    
      html, body, form
    
      {
    
       height: 100%;
    
       margin: 0;
    
       padding: 0;
    
      }
    
      </style>
    
    </head>
    
    <body>
    
     <table style="border-collapse: collapse; width: 500px; height: 1%;">
    
      <tr>
    
       <td style="border: 1px solid Silver;">
    
        &nbsp;
    
       </td>
    
       <td style="border: 1px solid Silver;">
    
        &nbsp;
    
       </td>
    
      </tr>
    
      <tr>
    
       <td style="border: 1px solid Silver;" rowspan="2">
    
         <div style="background-color: Green; height: 100%;">
    
         &nbsp;</div>
    
       </td>
    
       <td style="border: 1px solid Silver;">
    
        &nbsp;
    
       </td>
    
      </tr>
    
      <tr>
    
       <td style="border: 1px solid Silver;">
    
        &nbsp;
    
       </td>
    
      </tr>
    
      <tr>
    
       <td style="border: 1px solid Silver;">
    
        &nbsp;
    
       </td>
    
       <td style="border: 1px solid Silver;">
    
        &nbsp;
    
       </td>
    
      </tr>
    
     </table>
    
    </body>
    
    </html>
    
    
    Saturday, April 9, 2011 2:55 PM

All replies

  • Hi,

    Would this be for layout?

    Usually it is

    <table>

    <tr>

    <td id="tdHeader" colspan=2>

    <tr>

    <td id="tdNavigation">

    <td id="tdContent">

    <tr>

    <td id="tdFooter" colspan="2">

    layout should follow the law of gravity (viz.. table rows flow top to bottom, as the row height of a row with columns spans will not equal the cell height...

    Not that your example is not incorrect... Just that layout (with floating height content) usually uses colspans with table rows, not rowspans.


    Rob^_^
    • Marked as answer by Song TianModerator Friday, April 15, 2011 10:14 AM
    • Unmarked as answer by bap3 Tuesday, April 26, 2011 12:53 AM
    Sunday, April 10, 2011 11:27 PM
  • Thanks for you reply.  this is for a scheduler application. i'm trying to show appointments based on timeslots.  each row in the table represents a timeslot in 15 min increments.  if a 1 hr appointment is created, i use rowspan=4 on the td element to display the appoiintment.  inside the td, i add a DIV with height = 100% with background color.  In all other browsers FF/Chrome/Safari - the DIV height is recognized and set to 100% of the 4 rows (rowspan=4).  IE9 is the only browser that seems to ignore the height on the DIV.  That said, if i use quirks mode, IE9 *does* recognize the DIV height properly.  frustrating.  any other suggestions would be much appreciated.  Thanks!

    (In the example above, rowspan = 2 represents a 30 minute appt. but again the div height does not strech to 100% or the 2 rows in IE9)

    Monday, April 11, 2011 2:22 AM
  • copy the html example in the original post to notepad and save as text file with .html extension.  Now open in all the latest modern browsers (FF/Chrome/Safari/IE).  Notice all browsers recognize the green DIV with height of 100% except IE9 of course.
    Tuesday, April 26, 2011 1:00 AM
  • Note:

    change the doctype from

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    to html5 doctype below to get it to work in FF

    <!DOCTYPE>

    Tuesday, April 26, 2011 1:07 AM
  • Hi bap,

    Post to connect.microsoft.com/ie to bring to the attention of the IE Triage team. This is a public forum for web developers, not the feedback portal... we don't work for MS.

    Please see this w3c tutorial about character encoding... http://www.w3.org/International/tutorials/tutorial-char-enc/#Slide0250

    In other browsers, find the userStylesheet... for FX it is /styles/html.css and rename the file so that it is not applied by default.... you will see why..

    Regards.


    Rob^_^
    • Marked as answer by Song TianModerator Wednesday, April 27, 2011 2:36 AM
    • Unmarked as answer by bap3 Friday, April 29, 2011 1:40 AM
    Tuesday, April 26, 2011 1:30 AM
  • i appreciate your responses. but please stop marking this thread as answered.  i have no idea what the issue is and noone has provided a valid understandable response.  maybe IE9 has some rendering bugs and I need to do what Rob suggests by posting to connect.  the issue i have with that is it's like talking to a black hole.  so what is the point?
    Friday, April 29, 2011 1:42 AM
  • Hi,

    ... its probably not an acceptable answer... but if it doesn't work, don't use it.... the best we can do (until the IETeam tackles the issue on connect) is to report it to them...

    They will consider its importance.... there are some things that they may consider as not having a great importance (viz... it is rarely used in the wild) and would not justify the resource effort to fix...

    Tables and rowspan and colspan issues seem to be problematic...

    Commonly a developer may use a rowspan in a table that is used for page layout... as offered in the workaround, the solution is to design a table layout that does not use rowspan... there are more ways than one to skin the cat... or design a interoperable solution. Some developers swear by pure div layouts and never use tables at all in their solutions....

    "the issue i have with that is it's like talking to a black hole"

    yes....MS is a big company.... probably bigger than most countries....

    The forums here are meant for peer to peer discussion... the first step in issue resolution is to report it at a feedback portal (connect) where it can be assessed and triaged by the staff enganged in the development effort.

    It may be a bug... but we cannot fix it here... the best we can do is either direct you to connect or offer a workaround... If you do not want to report it to connect yourself, we can do it on your behalf, but I would encourage you to discuss it here first for a suggested workaround...

    It may sound like a cop-out, but often a workaround is the easier resolution of an issue... nothings perfect... usually the commonly used design patterns are in wide use because they work...

    Regards.


    Rob^_^
    Friday, April 29, 2011 4:37 AM
  • I have exactly the same problem with a web based Gantt chart application. In trying to render the bars (as tables with a single TR & TD element) for the gantt they must be 100% of the container table TD element. The HTML works fine in all browsers, even IE8. But it fails in IE9. I cannot find a work-around.

    No wonder Microsoft has lost so much ground in the "browser wars". IE continues to be a great sourse of negative advertising for Microsoft.

    Sunday, December 2, 2012 11:30 PM
  • By the way, I tried the MS connect site. They are only accepting bugs for IE10. I tried following the various links provided on connect for other assistance with older browsers. Dead ends, failed links or "Try Again Later" messages. Just more wasted time I will never get back thanks to Microsoft. A little bit like the "[Insert MS Product Name here] encountered a problem and needs to close" messages I routinely get.  

    Sunday, December 2, 2012 11:57 PM