SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    height of td in ie9

    Hello and nice to meet you.
    I have the following problem.
    Please take a look at http://paste2.org/p/1911703(I have attached the code below).
    In firefox the whole page fits in the viewport(no scrollbars appear) but in ie9 it doesn't.
    Each td has height 100%(the whole page).
    The code is generated from a control so it's a little bit difficult for me to change it.
    Any ideas please? Thanks.
    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">
    <head id="Head1"><meta http-equiv="X-UA-Compatible" content="IE=8" /><title>
    
    </title>
    </head>
    <body>
      
        <form method="post" action="" id="form1" enctype="multipart/form-data">
    <div style="height:20px" id="menu">
      foobar
    </div>
    <div id="secondMain" style="position:absolute;top:20px;right:0px;left:0px">
     second
    </div>
    <div id="editorDiv" style="position:absolute;left:0px;right:0px;bottom:0px;top:50px">
    	<div style="height:100%;border:1px solid #f00">
    		
    		<table cellspacing="0" border="1" cellpadding="0" style="table-layout: auto; width: 100%; height: 100%;">
    		<tr>
    		<td>
    		asf
    		</td>
    		
    		</tr>
    		<tr>
    		<td style="height:100%">
    		1
    		</td>
    		</tr
    		<tr>
    		<td style="height:100%">
    		2
    		</td>
    		</tr>
    		</table>
    	</div>
      
    </div>
    </form>
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi, Welcome to Sitepoint

    The problem is that you are using the IE8 meta tag and making the pretty good IE9 behave like the pretty bad IE8. Remove the meta tag and let IE9 loose.

    Remove This:
    Code:
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    IE8 and under will still get it wrong though as they will add the 2 cells up and make 2 * 100% equal 200% (as you might expect). You probably should only apply the 100% to the last td anyway otherwise IE9 will try and equally divide it between the 2 cells that have the height specified.

  3. #3
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for answering.
    In ie8
    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">
    <head id="Head1"><title>
    
    </title>
    </head>
    <body>
      
        <form method="post" action="" id="form1" enctype="multipart/form-data">
    <div style="height:20px" id="menu">
      foobar
    </div>
    <div id="secondMain" style="position:absolute;top:20px;right:0px;left:0px">
     second
    </div>
    <div id="editorDiv" style="position:absolute;left:0px;right:0px;bottom:0px;top:50px">
    	<div style="height:100%;border:1px solid #f00">
    		
    		<table cellspacing="0" border="1" cellpadding="0" style="table-layout: fixed; width: 100%; height: 100%;">
    		<tr>
    		<td >
    		asf
    		</td>
    		
    		</tr>
    		<tr>
    		<td style="height:100%">
    		1
    		</td>
    		</tr
    		<tr>
    		<td >
    		2
    		</td>
    		</tr>
    		</table>
    	</div>
      
    </div>
    </form>
    </body>
    </html>
    this still doesn't work as expected.
    The height of #menu and #secondMain are ignored when ie8 calculates the height of the table.
    I would expect the table to be equal to the height of #editorDiv.

    ps:Well ok,I suppose the title of my post is not 100% correct.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tasoss View Post
    Thanks for answering.
    In ie8 this still doesn't work as expected.
    The height of #menu and #secondMain are ignored when ie8 calculates the height of the table.
    I would expect the table to be equal to the height of #editorDiv.

    ps:Well ok,I suppose the title of my post is not 100% correct.
    No, I said it wouldn't work in IE8. If you remove the height:100% from the td then it will work and the table will be 100% high (apart from the borders you added which make it bigger). Once you add 100% to one of the tds then the table height in IE8 becomes 100% + the height of the other 2 tds. IE8 doesn't understand that when you over constrain the height of the table-cells that it should re-distribute within the original table height. Instead it just expands the table to fit the content. Can you get away with just one cell?

    Maybe there's some other way of doing what you want without a table but it sounds like you are stuck to what you have already.

  5. #5
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry for the delay,thank you very much.


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
  •