473,385 Members | 1,602 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 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 10495
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

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

Similar topics

5
by: Charles Blaquière | last post by:
As part of my explorations in liquid design, I'm exploring ways to use the overflow: hidden property -- when browser windows become too narrow, I want (some) images to get cropped rather than have...
7
by: kaeli | last post by:
I've been trying to get away from using tables as a layout tool, but I've just come across what I consider to be a serious liability. If I specify a width (minimum, really) in a div, such as ...
2
by: Jason Chu | last post by:
Simple compatibility question, I have this: <table height="100%" width="50%" border="1"> <tr height="50%"> <td> <asp:Panel id="Panel1" runat="server" Height="100%" Width="100%"...
4
by: reycri | last post by:
I have a page that works as I intend in IE but not in Firefox: <html> <head> <title>Overflow Test</title> </head> <body style='overflow:hidden; margin:0; padding:0;'> <table border='0'...
0
by: asnowfall | last post by:
I trying to use 'overflow-x: auto;' for my webpage. I based my work on a news group sample. On IE, I have a problem and that is as follows. I am applying 'overflow-x: to <DIVthat is inside the...
2
by: esteuart | last post by:
I need to get the right combination for a div to clip any text inside and allow vertical alignment. I only have this problem in FireFox. I have 3 divs nested within each other. The outer div has...
4
by: obanite | last post by:
Hi! I'm having issues with css in FF and IE regarding overflow: auto and font-size. If I have a div like this: <div style="overflow: auto">...
2
by: Amzul | last post by:
hello all i have a problam its a bit strang hope you can help me: i am trying to put a table inside a div and i dont want the table to overflow the div size i did this <div...
8
by: Tophurious | last post by:
First, let me start by saying I know what an overflow is (Too large of a value into something that can't hold it, i.e. 35000 into an int, or 0/0, etc). Now to the issue. I have a class that I am...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.