www.webdeveloper.com
Results 1 to 3 of 3

Thread: IE8 Div + Table Overflow Bug

  1. #1
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

    IE8 Div + Table Overflow Bug

    I've been neck deep in HTML, CSS and JavaScript for 10 years, and I figured I had seen everything. Every now and again Everyone's Favorite Browser throws me for a loop.

    I found a display bug in IE8 where scrollbars always appear on a DIV whose overflow is "auto" and contains a TABLE whose last row contains a TD or TH tag with a rowspan greater than 1.

    HTML Code:
    <div style="background-color: #ccffcc; overflow: auto;">
    	<table style="background-color: #ffcccc;">
    		<tr>
    			<td rowspan="2">Bad</td>
    			<td>A</td>
    		</tr>
    		<tr>
    			<td>B</td>
    		</tr>
    	</table>
    </div>
    There are a number of fixes:

    1) Add overflow="hidden" to the TABLE

    HTML Code:
    <div style="background-color: #ccffcc; overflow: auto;">
    	<table style="background-color: #ffcccc; overflow: hidden;">
    		<tr>
    			<td rowspan="2">Good</td>
    			<td>A</td>
    		</tr>
    		<tr>
    			<td>B</td>
    		</tr>
    	</table>
    </div>
    2) Make sure the last row does not have a rowspan attribute and contains some sort of content:

    HTML Code:
    <div style="background-color: #ccffcc; overflow: auto;">
    	<table style="background-color: #ffcccc;">
    		<tr>
    			<td rowspan="2">Good Too</td>
    			<td>A</td>
    		</tr>
    		<tr>
    			<td>B</td>
    		</tr>
    		<tr>
    			<td colspan="2">&nbsp;</td>
    		</tr>
    	</table>
    </div>
    I actually discovered this working on a .NET web app using the Ajax Toolkit: <ajaxToolkit:RoundedCornersExtender />

    I had a table whose last row contained a rowspan attribute, and used the <ajaxToolkit:RoundedCornersExtender /> tag to make its containg DIV a rounded corner box. I had scrollbars and couldn't get rid of them because the .NET-generated JavaScript was wrapping stuff in an anonymous DIV tag with its overflow set to "auto".

    *sigh*

    Just thought I'd share since this was such a bizarre bug.

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    Also note that this only occurred when the page was rendered in Standards Mode. Quirks Mode did not exhibit the same problem. The full HTML source I used is below:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    	<title>IE Div + Table Overflow Bug</title>
    </head>
    <body style="background-color: #ccc;">
    
    <div style="background-color: #ccffcc; overflow: auto;">
    	<table style="background-color: #ffcccc;">
    		<tr>
    			<td rowspan="2">Bad</td>
    			<td>A</td>
    		</tr>
    		<tr>
    			<td>B</td>
    		</tr>
    	</table>
    </div>
    
    <p>&nbsp;</p>
    
    <div style="background-color: #ccffcc; overflow: auto;">
    	<table style="background-color: #ffcccc; overflow: hidden;">
    		<tr>
    			<td rowspan="2">Good</td>
    			<td>A</td>
    		</tr>
    		<tr>
    			<td>B</td>
    		</tr>
    	</table>
    </div>
    
    <p>&nbsp;</p>
    
    <div style="background-color: #ccffcc; overflow: auto;">
    	<table style="background-color: #ffcccc;">
    		<tr>
    			<td rowspan="2">Also Good</td>
    			<td>A</td>
    		</tr>
    		<tr>
    			<td>B</td>
    		</tr>
    		<tr>
    			<td>1</td>
    			<td>2</td>
    		</tr>
    	</table>
    </div>
    
    <p>&nbsp;</p>
    
    <div style="background-color: #ccffcc; overflow: auto;">
    	<table style="background-color: #ffcccc;">
    		<tr>
    			<td rowspan="2">Good Too</td>
    			<td>A</td>
    		</tr>
    		<tr>
    			<td>B</td>
    		</tr>
    		<tr>
    			<td colspan="2">&nbsp;</td>
    		</tr>
    	</table>
    </div>
    
    </body>
    </html>

  3. #3
    Join Date
    Oct 2013
    Posts
    600
    I had high hopes that putting the HTML5 shiv in the head would solve this.
    Code:
    <!--[if lt IE 9]>
    	  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    Alas, 'twas not to be. Scrollbars showed up in XP/SP3/IE8 which I still run on an old computer.

    I'll agree with you:
    *sigh*

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