Table in div does not get scrollbars in IE7

**Grutto** · 05-21-2007, 09:46 AM

Hi,
I have the following strange problem in IE7. I have a htmltable within a div. The div has style attribute "overflow" set to "auto". In IE6 and FF this works OK and I get scrollbars. In IE7 there are no scrollbars! Does anyone know what could be the problem?

HTML 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>Test - 2006 Application Settings </title>
	<style type="text/css">
		.ListView{
			border-color:#7C7C94;
			margin-right:10px;
			border-width:1px;
			border-style:solid;
			background-color:#FFFFFF;	 		
			overflow:auto;
		}
		.ListView TABLE{	 
			width:100%;		
		}
		.ListView TH{
			color:White;	
			background-color:#639ABD;
			font-family:Verdana;
			font-size:10px;
			font-weight:bold;
			font-style:normal;
			text-decora tion:none;	
			white-space:nowrap;  	
			text-align:left;
			padding-right:5px;
			padding-left:3px;
			border-right:1px solid #FFFFFF; 
			height:15px;
		}

		.ListView tr.RowLight{
			color:#000000;
			background-color:#FFFFFF;	
			text-decoration:none;	
		}
		.ListView tr.RowDark{
			color:#000000;
			background-color:#F0F8FF;	
			text-decoration:none;		
		}
		.ListView td{
			padding-left:3px;
			font-family:Verdana;
			font-size:10px;
			white-space:nowrap;
			padding-right:5px;
			height:20px;	
		}
	</style>
</head >
<body>
	<form name="aspnetForm" method="post" action="Settings.aspx" id="aspnetForm">
		<div id="ctl00_lstSettings" class="ListView" style="width:200px; height:100px;">
			<table id="ctl00_lstSettings_Table" border="0" cellpadding="0" cellspacing="0">
				<tr>					
					<th style="cursor: pointer;">
						Setting name&nbsp;</th>
					<th style="cursor: pointer;">
						Value</th>
				</tr>
				<tr id="ctl00_lstSettings_row0" class="RowLight">					
					<td>
						Test
					</td>
					<td>
						hhhhhhhhh
					</td>
				</tr>
				<tr id="ctl00_lstSettings_row1" class="RowDark">					
					<td>
						Test
					</td>
					<td>
						hhhhhhhhh
					</td>
				</tr>
				<tr id="ctl00_lstSettings_row2" class="RowLight">					
					<td>
						Test
					</td>
					<td>
						kkkk
					</td>
				</tr>
				<tr id="ctl00_lstSettings_row3" class="RowDark">					
					<td>
						Test
					</td>
					<td>
						klkl
					</td>
				</tr>
				<tr id="ctl00_lstSettings_row4" class="RowLight">					
					<td>
						Test
					</td>
					<td>
						gg
					</td>
				</tr>
				<tr id="ctl00_lstSettings_row5" class="RowDark">					
					<td>
						Test
					</td>
					<td>
						hhhhhhhhh
					</td>
				</tr>				

			</table>
		</div>
	</form>
</body>
</html>

**Fang** · 05-21-2007, 12:15 PM

Code:

  .ListView{ border-color:#7C7C94; margin-right:10px; border-width:1px; border-style:solid; background-color:#FFFFFF; overflow:auto;overflow-x:hidden; position:relative;} 
  .ListView TABLE{width:100%; position:absolute;}

Alternatively

Code:

.ListView .ListView{ border-color:#7C7C94; margin-right:10px; border-width:1px; border-style:solid; background-color:#FFFFFF; overflow:auto;overflow-x:hidden; } 
.ListView TABLE{width:99%;}

**Grutto** · 05-22-2007, 03:53 AM

Thanks a lot Fang! The position:absolute for the table and position:relative for the div was the solution for this problem. What is still strange is that suddenly the horizontal scrollbar appears because of the vertical scrollbar.

"overflow-x:hidden" isn't really a solution for this because if the table is really wider than the div should have a scrollbar.
"width:99%" gives an ugly blanc space if the vertical scrollbar is not there.

Does anyone have an idea?

**Jough** · 06-14-2007, 05:43 PM

Ive recently run into the same problem and was unable to find a solution (or even another documented case) until I ran across this forum. Have you seen any documentation regarding this IE7 bug?

Thanks for the fix, btw!

**Fang** · 06-15-2007, 12:12 AM

Code:

  .ListView TABLE{ width:auto; border-collapse:collapse;} 
  .ListView TH{width:45%; color:White; background-color:#639ABD; font-family:Verdana; font-size:10px; font-weight:bold; font-style:normal; text-decora tion:none; white-space:nowrap; text-align:left; padding-right:5px; padding-left:3px; border-right:1px solid #FFFFFF; height:15px; }

Thread: Table in div does not get scrollbars in IE7

Thread Tools

Display

Table in div does not get scrollbars in IE7

Same problem.

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions