Table Cell height 100% causes scroll??

jslaybaugh

I'm working on an ASP.NET 2.0 application and am having trouble with a
very simple table layout. Using ASP.NET 2.0 it defaults to XHTML 1.0
Transitional and I am trying to comply. However, I cannot seem to get
my table to render properly, so I pulled out all the server controls
and just made a very simple HTML only page and am having the same
problem still.

The problem can bee seen in the code below. The top row is 100px high
and the bottom row is 100% high. The problem comes in that it actually
creates a table that is 100% + 100px high. This causes vertical
scroll.

Of course, this doesnt happen if i remove the !DOCTYPE declaration, but
I would really like to comply to the XHTML standard.

Can anyone help me???

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

<html xmlns="http://www.w3.org/1999/xhtml"
style="height:1 00%;width:100%; margin:0;" >
<body style="width:10 0%;height:100%; margin:0;">
<table style="height:1 00%;width:100%; " cellpadding="0"
cellspacing="0" border="1">
<tr>
<td style="height:1 00px;width:100% ;">text<br />text<br
/>text</td>
</tr>
<tr>
<td style="height:1 00%;width:100%; ">text</td>
</tr>
</table>
</body>
</html>

Feb 9 '06 #1

Subscribe Reply

6019

S. Justin Gengo [MCP]

Jay,

Have you tried a height of 99%?

--
Sincerely,

S. Justin Gengo, MCP
Web Developer / Programmer

www.aboutfortunate.com

"Out of chaos comes order."
Nietzsche
<js********@gma il.com> wrote in message
news:11******** **************@ g44g2000cwa.goo glegroups.com.. .

I'm working on an ASP.NET 2.0 application and am having trouble with a
very simple table layout. Using ASP.NET 2.0 it defaults to XHTML 1.0
Transitional and I am trying to comply. However, I cannot seem to get
my table to render properly, so I pulled out all the server controls
and just made a very simple HTML only page and am having the same
problem still.

The problem can bee seen in the code below. The top row is 100px high
and the bottom row is 100% high. The problem comes in that it actually
creates a table that is 100% + 100px high. This causes vertical
scroll.

Of course, this doesnt happen if i remove the !DOCTYPE declaration, but
I would really like to comply to the XHTML standard.

Can anyone help me???

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

<html xmlns="http://www.w3.org/1999/xhtml"
style="height:1 00%;width:100%; margin:0;" >
<body style="width:10 0%;height:100%; margin:0;">
<table style="height:1 00%;width:100%; " cellpadding="0"
cellspacing="0" border="1">
<tr>
<td style="height:1 00px;width:100% ;">text<br />text<br
/>text</td>
</tr>
<tr>
<td style="height:1 00%;width:100%; ">text</td>
</tr>
</table>
</body>
</html>

Feb 9 '06 #2

Jonathan N. Little

js********@gmai l.com wrote:

I'm working on an ASP.NET 2.0 application and am having trouble with a
very simple table layout. Using ASP.NET 2.0 it defaults to XHTML 1.0
Transitional and I am trying to comply. However, I cannot seem to get
my table to render properly, so I pulled out all the server controls
and just made a very simple HTML only page and am having the same
problem still.

The problem can bee seen in the code below. The top row is 100px high
and the bottom row is 100% high. The problem comes in that it actually
creates a table that is 100% + 100px high. This causes vertical
scroll.

Of course, this doesnt happen if i remove the !DOCTYPE declaration, but
I would really like to comply to the XHTML standard.

Can anyone help me???

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

<html xmlns="http://www.w3.org/1999/xhtml"
style="height:1 00%;width:100%; margin:0;" >
<body style="width:10 0%;height:100%; margin:0;">
<table style="height:1 00%;width:100%; " cellpadding="0"
cellspacing="0" border="1">
<tr>
<td style="height:1 00px;width:100% ;">text<br />text<br
/>text</td>
</tr>
<tr>
<td style="height:1 00%;width:100%; ">text</td>
</tr>
</table>
</body>
</html>

Try viewing in another browser *other than* MSIE

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Feb 9 '06 #3

Neredbojias

With neither quill nor qualm, js********@gmai l.com quothed:

I'm working on an ASP.NET 2.0 application and am having trouble with a
very simple table layout. Using ASP.NET 2.0 it defaults to XHTML 1.0
Transitional and I am trying to comply. However, I cannot seem to get
my table to render properly, so I pulled out all the server controls
and just made a very simple HTML only page and am having the same
problem still.

The problem can bee seen in the code below. The top row is 100px high
and the bottom row is 100% high. The problem comes in that it actually
creates a table that is 100% + 100px high. This causes vertical
scroll.

Of course, this doesnt happen if i remove the !DOCTYPE declaration, but
I would really like to comply to the XHTML standard.

Can anyone help me???

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

<html xmlns="http://www.w3.org/1999/xhtml"
style="height:1 00%;width:100%; margin:0;" >
<body style="width:10 0%;height:100%; margin:0;">
<table style="height:1 00%;width:100%; " cellpadding="0"
cellspacing="0" border="1">
<tr>
<td style="height:1 00px;width:100% ;">text<br />text<br
/>text</td>
</tr>
<tr>
<td style="height:1 00%;width:100%; ">text</td>
</tr>
</table>
</body>
</html>

Why do you put a height on the bottom "row" at all?

--
Neredbojias
Contrary to popular belief, it is believable.

Feb 9 '06 #4

jslaybaugh

Thanks for everyone's quick replies. Sorry I didnt get back to it till
the end of the day. I have tried everyone's suggestions, and here are
the results:

Have you tried a height of 99%?
Yes, at my current resolution, I have to take it all the way down to
80% in order to make up for the 100px it is off by. If I scale the
window down, I have to go as low as 70%. Seems like there is a better
workaround.
Try viewing in another browser *other than* MSIE
Of course, it works perfectly in Firefox, but all the users of this
application will be MSIE 6.0 users, so I need a more universal
"standard" solution.
Why do you put a height on the bottom "row" at all?

If I take the bottom row height attribute out, the table is all messed
up on MSIE. The top row becomes huge and the bottom row becomes small.
Almost exactly opposite what I want. (although not exactly opposite,
because if I try the opposite scenario--not putting a height attribute
on the top row--it still doesnt work). Of course, again in Firefox, it
works great if I remove the height attribute off the bottom row, but I
need a solution for MSIE as I mentioned before.

Thanks for the suggestions, but I'm still stuck here....any other
ideas????

Jorin

Feb 9 '06 #5

Jonathan N. Little

js********@gmai l.com wrote:
<snip>

If I take the bottom row height attribute out, the table is all messed
up on MSIE. The top row becomes huge and the bottom row becomes small.
Almost exactly opposite what I want. (although not exactly opposite,
because if I try the opposite scenario--not putting a height attribute
on the top row--it still doesnt work). Of course, again in Firefox, it
works great if I remove the height attribute off the bottom row, but I
need a solution for MSIE as I mentioned before.

Thanks for the suggestions, but I'm still stuck here....any other
ideas????

If I had to guess here, I bet this is important because the table
doesn't contain tabular data but your layout. Simple solution is don't,
just loose the table!

STYLE:
BODY {
margin: 0;
padding: 0;
}
..banner {
height: 100px: margin: 0;
...[whatever else you want to style ]
}

HTML:
....
<body>
<div class="banner"> text in the upper part</div>
<p>
Every thing else regardless how much you put here...
</p>
</body>
</html>
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Feb 10 '06 #6

jslaybaugh

Thanks again for another suggestion, however we still have a problem.
I didnt go into this much detail at first, because I was having the
problem even in the simple scenario I mentioned above, but inside my
bottom "row" that is supposed to fill the height, I am going to have a
table that splits that bottom row vertically about 60/40 and put an
iFrame in the right half. So, since I want this iFrame to fill the
height of its container (as the box model suggests all of this should
work), I need that bottom area to fill the remaining height.

-----------------------------------
| header |
-----------------------------------
| ^ | |
| 100% | iframe |
| v | |
-----------------------------------

I did try to remove the tables altogether since that apparently is bad
design nowadays, and this i still have the same problem. The
simplified HTML can be seen below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

<html xmlns="http://www.w3.org/1999/xhtml"
style="height:1 00%;width:100%; margin:0;paddin g:0;" >
<body style="width:10 0%;height:100%; margin:0;paddin g:0;">
<div
style="height:1 00%;width:100%; margin:0;border :none;padding:0 ;">
<div
style="height:1 00px;width:100% ;margin:0;borde r:none;padding: 0;">text<br
/>text<br />text</div>
<div
style="height:1 00%;width:100%; margin:0;border :none;padding:0 ;">text<br
/>text<br />text</div>
</div>
</body>
</html>

If you create that file, you'll still have vertical scroll in MSIE.

Thanks, though! Any other ideas??

Feb 10 '06 #7

Similar topics

6236

Scrolling Table - Which browsers support this code

by: johkar | last post by:

I only have IE 6 and dial-up. Can you help me determine which browsers support this code? Thanks, John <html> <head> <title>Fixed Table Headers</title> <script language="JavaScript" type="text/javascript"> function fix(){

Javascript

5127

How to scroll the content of cells in a table?

by: Manuel Reimer | last post by:

Hello, I have the following problem: I have a table on my homepage which has two cells. One cell left which has the menu in it and one on the right where I display the content. This table has an height of 100% and an width of 100%. As soon as the content of one cell is too big for the table I want the browser to show a scrollbar in this cell. I'm sure that this is possible with CSS (overflow:auto?), but I couldn't find the solution so...

HTML / CSS

24500

How to do a <table> with <div> tag

by: Toby Austin | last post by:

I'm trying to replace <table>s with <div>s as much as possible. However, I can't figure out how to do the following… <table> <tr> <td valign="top" width="100%">some data that will 'stretch'</td> <td valign="top" width="300">some data that won't 'stetch'</td> </tr> </table>

HTML / CSS

35991

Table with fixed header row and scrolling content?

by: Big Slim | last post by:

I'm trying to use the OVERFLOW property to make only part of a table scrollable, but to no avail. You can split a table into two tables, with your column headers in the top table and your data in the bottom table. This allows you to scroll trough lots of data with the header stationery, but of course then the column widths vary and the header table doesn't align properly with the data data. When I use a DIV around the data rows, its...

HTML / CSS

3385

Resizing a table

by: z | last post by:

Hi, i just wanted to know how i can resize a table using javascript but in this special manner: I have two tables, one at the top of the page and the other below that one. The problem is that in that code shown below there is a scroll in the window, and what I want is resizing the table t2 from the height of 100% down to the max number of pixels so that there is no scroll in the window. Which should be the code for the function...

Javascript

3901

empty table cell to be used as link

by: Greg N. | last post by:

Hi folks, I have a table cell with a background image, something like <td background=landscape.jpg height=200></td> The sole purpose of this code is to display the image inside that table cell. It displays just as much of the image as the current cell width allows. The actual cell width is determined by other cells in the same table column and by the current browser window width.

Javascript

1513

Table formatting problem

by: Thomas Scheiderich | last post by:

I have a table that has 3 image slices. The middle slice changes size based on size of browser window. This works great. My client wants the date to show over the image on the right. So what I did was cut off the top part of the image (which is just a solid color and I can handle by making the background-color of the cell this color). I then use a asp line to display the date, which also works. Here is the original table setup for...

ASP.NET

8341

Panel in Table with overflow problem with firefox

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%" CssClass="scroll"> <asp:Label id="Label1" runat="server">Label</asp:Label></asp:Panel> </td> </tr> <tr height="50%">

ASP.NET

4708

Table which resizes horizontally and vertically with the browser window

by: sachjn | last post by:

Hi, I need to have a table along with other UI items in page which resizes horizontally and vertically with the browser window. That means table should accoupy the remaining available space in the browser window and should display horizontal and vertical scroll bars if content of table is more than available width & height. I can do similer to this by enclosing table in a <DIV> with style as : overflow:auto; height:200px etc. But things...

HTML / CSS

9456

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9873

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9846

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9713

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

8713

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7248

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6534

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5142

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

3359

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP