Horizontal Scrollbars not working in IE Browsers

I am trying to develop a fluid layout to contain data in table cells that will have both vertical and horizontal scrolling. At this point I can only get the vertical to work in IE. When a cell is full of information it will not scroll horizontally. Here is the code for the simple table:

Any ideas on this or a better way to present the data would be great.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
	<table border=1 width=100% height=100% cellspacing=5px cellpadding=5px>
		<tr height=60%>
			<td>
				<table border=1 width=100% height=100% cellspacing=5px cellpadding=5px>
					<tr>
						<td width=40%>
							<div style="overflow:auto; height:100%;">
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
							</div>
						</td>
						<td width=20%>
							<table border=1 width=100% height=100% cellspacing=5px cellpadding=5px>
								<tr height=60%>
									<td>
										<div style="overflow:auto; height:100%;">
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
										</div>
									</td>
								</tr>
								<tr height=40%>
									<td>
										<div style="overflow:auto; height:100%;">
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
										</div>
									</td>
								</tr>
							</table>
						</td>
						<td width=40%>
							<div style="overflow:auto; height:100%;">
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
							</div>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr height=40%>
			<td>
				<table border=1 width=100% height=100% cellspacing=5px cellpadding=5px>
					<tr>
						<td width=14%>
							<div style="overflow:auto; height:100%;">
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
							</div>
						</td>
						<td width=14%>
							<div style="overflow:auto; height:100%;">
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
							</div>
						</td>
						<td width=14%>
							<div style="overflow:auto; height:100%;">
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
							</div>
						</td>
						<td width=14%>
							<div style="overflow:auto; height:100%;">
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
							</div>
						</td>
						<td width=30%>
							<div style="overflow:auto; height:100%;">
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
							</div>
						</td>
						<td width=14%>
							<div style="overflow:auto; height:100%;">
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
This is a sample line of text.<br>
							</div>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</body>
</html>

Open in new window

RNGeerAsked:
Who is Participating?
 
RNGeerConnect With a Mentor Author Commented:
Still acts funny on the width. Adding overflow:scroll doesn't seem to fix it either. Stumped here. Thanks for your help.
0
 
gops1Connect With a Mentor Commented:
Height of 100% with no restriction to the height of the TD will not give you the desired result. You either must give a height for the DIV in "px" or give a height for the TD. May be you can try this code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<style>
		td{height:100px;}
	</style>
</head>
<body>
        <table border=1 width=100% height=100% cellspacing=5px cellpadding=5px>
                <tr height=60%>
                        <td>
                                <table border=1 width=100% height=100% cellspacing=5px cellpadding=5px>
                                        <tr>
                                                <td width=40%>
                                                        <div style="overflow:auto; height:100%;">
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
                                                        </div>
                                                </td>
                                                <td width=20%>
                                                        <table border=1 width=100% height=100% cellspacing=5px cellpadding=5px>
                                                                <tr height=60%>
                                                                        <td>
                                                                                <div style="overflow:auto; height:100%;">
																					This is a sample line of text.<br>
																					This is a sample line of text.<br>
																					This is a sample line of text.<br>
																					This is a sample line of text.<br>
																					This is a sample line of text.<br>
																					This is a sample line of text.<br>
																					This is a sample line of text.<br>
																					This is a sample line of text.<br>
																					This is a sample line of text.<br>
																					This is a sample line of text.<br>
																					This is a sample line of text.<br>
                                                                                </div>
                                                                        </td>
                                                                </tr>
                                                                <tr height=40%>
                                                                        <td>
                                                                                <div style="overflow:auto; height:100%;">
																				This is a sample line of text.<br>
																				This is a sample line of text.<br>
																				This is a sample line of text.<br>
																				This is a sample line of text.<br>
																				This is a sample line of text.<br>
																				This is a sample line of text.<br>
																				This is a sample line of text.<br>
																				This is a sample line of text.<br>
																				This is a sample line of text.<br>
																				This is a sample line of text.<br>
																				This is a sample line of text.<br>
                                                                                </div>
                                                                        </td>
                                                                </tr>
                                                        </table>
                                                </td>
                                                <td width=40%>
                                                        <div style="overflow:auto; height:100%;">
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
                                                        </div>
                                                </td>
                                        </tr>
                                </table>
                        </td>
                </tr>
                <tr height=40%>
                        <td>
                                <table border=1 width=100% height=100% cellspacing=5px cellpadding=5px>
                                        <tr>
                                                <td width=14%>
                                                        <div style="overflow:auto; height:100%;">
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
                                                        </div>
                                                </td>
                                                <td width=14%>
                                                        <div style="overflow:auto; height:100%;">
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
                                                        </div>
                                                </td>
                                                <td width=14%>
                                                        <div style="overflow:auto; height:100%;">
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
                                                        </div>
                                                </td>
                                                <td width=14%>
                                                        <div style="overflow:auto; height:100%;">
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
                                                        </div>
                                                </td>
                                                <td width=30%>
                                                        <div style="overflow:auto; height:100%;">
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
                                                        </div>
                                                </td>
                                                <td width=14%>
                                                        <div style="overflow:auto; height:100%;">
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
															This is a sample line of text.<br>
                                                        </div>
                                                </td>
                                        </tr>
                                </table>
                        </td>
                </tr>
        </table>
</body>
</html>

Open in new window

0
All Courses

From novice to tech pro — start learning today.