www.webdeveloper.com
Results 1 to 6 of 6

Thread: FF and IE render different heights for nested table/divs

  1. #1
    Join Date
    Mar 2010
    Posts
    3

    FF and IE render different heights for nested table/divs

    Can someone explain why this code renders as as a 600px high block in IE8, but as a 2000px high block in FF (and Chrome)? Personally I would expect the IE behaviour, but I'm no expert on standards. My reasoning here is that the innermost div should not affect the height of anything, since its parent has "overflow:hidden".

    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><title>Untitled Page</title>
    <style type="text/css">
    * { margin: 0; padding:0; }
    html, body, table, tr, td { width:100%; height:100%;}
    </style>
    </head>
    <body>
        <div style="height:600px;">
        <table cellpadding="0" cellspacing="0">
        <tr>
    		<td>
    		<div style="overflow:hidden;height:100%;background-color:red;width:300px;">
    			<div id="testdiv" style="background-color:blue;width:200px;height:2000px;overflow:auto;">
    			TEST!
    			</div>
    		</div>
    		</td>
    	</tr>
        </table>
        </div>
    </body>
    </html>

  2. #2
    Join Date
    Dec 2009
    Posts
    24
    the div might have overflow hidden, but it's height is set to 100&#37;. seeing as the content of the subdiv is 2000px, the 100% is equal to the 2000px;

  3. #3
    Join Date
    Mar 2010
    Posts
    3
    According to w3schools.com a percentage height "Defines the height in percent of the containing block", not its content. But i guess that the content affects the size of the table, which then of course affects the size of the container. But should the table really behave like this?

    Unfortunately I'm stuck with the table, as it is generated from a third party Asp.Net component. But if there was any way of making FF behave like IE in this matter, I'd really like to know.

  4. #4
    Join Date
    Dec 2009
    Posts
    24
    set the div that has a style of
    height: 600px;
    to height: 600px; overflow: hidden

    this should do the trick

  5. #5
    Join Date
    Mar 2010
    Posts
    3
    Thank you for your suggestions skullsnest. That does make it appear to have the correct height. However, it really only hides the problem. The table is still 2000px high in FF, only clipped to 600px. If I, for instance, set testdiv's height to 100% its content will be scrollable in IE, but clipped in FF.

  6. #6
    Join Date
    Mar 2010
    Posts
    2,803
    The table model is a beast unto itself.

    If you want to adjust the height of divs, p's etc in td's I think you'll find it will work better if you set width and height styles to the td's containing the content and not the content itself.

    Then you might run into the problem of browser incompatibility which appears you might have here.

    My recommendation, for what it's worth - steer away from tables as a layout tool, especially nested tables and stick to using css for layout and styling your pages....but that's just me..

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles