471,610 Members | 1,331 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,610 software developers and data experts.

overflow div inside table issue

I have been working on an application that generates html source code. I came across an issue and have replicated it down to the simplest form. The problem is that I have a div covering 42% of the page. Inside that I have a table that covers 85% of the div. Inside that table I have a div with overflow: auto set so that if the data in the div becomes larger than the 85% of the table the div will start to scroll. The code works fine in IE & not in Firefox. I know I could make changes to get the same result but I have to get this exact code working. Can anyone please help?. Here it is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html style="height: 100%;">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="height="100%" bgcolor="#FFFFF5">
<div style="height: 42%; width: 98%; background-color: #ECECEC;">
<table cellspacing="0" cellpadding="10" border="0" style="width: 100%; height: 85%;">
<tr>
<td>
<div style="border: solid 1px #BED6F8; height: 80%; width: 100%; overflow: auto;">
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>

Thanx in advance...
Jaybee07
Aug 23 '07 #1
1 10293
I have been working on an application that generates html source code. I came across an issue and have replicated it down to the simplest form. The problem is that I have a div covering 42% of the page. Inside that I have a table that covers 85% of the div. Inside that table I have a div with overflow: auto set so that if the data in the div becomes larger than the 85% of the table the div will start to scroll. The code works fine in IE & not in Firefox. I know I could make changes to get the same result but I have to get this exact code working. Can anyone please help?. Here it is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html style="height: 100%;">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="height="100%" bgcolor="#FFFFF5">
<div style="height: 42%; width: 98%; background-color: #ECECEC;">
<table cellspacing="0" cellpadding="10" border="0" style="width: 100%; height: 85%;">
<tr>
<td>
<div style="border: solid 1px #BED6F8; height: 80%; width: 100%; overflow: auto;">
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>

Thanx in advance...
Jaybee07
I figured it out, just if anyone needs to know in the future here is the corrected code for Firefox. I needed to specify 100% heights on both <tbody> and <td>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html style="height: 100%;">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="height: 100%;" bgcolor="#FFFFF5">
<div style="height: 42%; width: 98%; background-color: #ECECEC;">
<table cellspacing="0" cellpadding="10" border="0" style="width: 100%; height: 85%;">
<tbody style="height: 100%">
<tr>
<td height="100%">
<div style="border: solid 1px #BED6F8; height: 80%; width: 100%; overflow: auto;">
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
row<br>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Rgds,
Jaybee07
Aug 24 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Jason Chu | last post: by
4 posts views Thread by reycri | last post: by
reply views Thread by asnowfall | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by CCCYYYY | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.