Solved

Why is there a gap at the bottom of the page when table is Height=100%

Posted on 2007-12-04
7
207 Views
Last Modified: 2013-12-08
In IE when I make a table with the height of 100%, it covers the entire height of the screen with no scroll bar but in Firefox and Safar, it will create a gab at the bottom of the page. Can anyone tell me why and how to prevent this?

I'm going to use this table to put my footer at the bottom but I don't want that gap because you can see the background making it untidy. THanks
0
Comment
Question by:wilcor14
  • 4
  • 3
7 Comments
 
LVL 39

Expert Comment

by:Eoin OSullivan
Comment Utility
You also need to set the height in the body tag to 100%  ..  so that the table knows what to scale to.

Even still there are lots of issues trying to get a table to fill the view 100% height in all browsers.

0
 

Author Comment

by:wilcor14
Comment Utility
eoinosullivan

thanks for the feedback. I tried the height in the body but that didn't work. I'll keep trying. thanks.
0
 
LVL 39

Expert Comment

by:Eoin OSullivan
Comment Utility
Can you provide a sample of the HTML code or a link to the relevant page?

See this article on how and why it can work and what you need to do
http://apptools.com/examples/tableheight.php
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:wilcor14
Comment Utility
Sure, here it is.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<%@ Register TagPrefix="Coaching" TagName="Footer" Src="includes/CSFooter.ascx" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

	<HEAD id="HEAD1" runat="server">

		<title>::: CoachingSource.com ::: Be a student of YOUR game!</title>

	</HEAD>

	<BODY bottomMargin="0" leftMargin="0" background="images/sub_back2.gif" topMargin="0" rightMargin="0">

		<form id="Form1" method="post" runat="server">

			<TABLE id="Table2" height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">

				<TR>

					<TD height="1">

						Header

					</TD>

				</TR>

				<TR>

					<TD vAlign="top">

					    Center Page Content	

					</TD>

				</TR>

			    <TR>

				    <TD height="1"><COACHING:FOOTER id="footer" runat="server"></COACHING:FOOTER></TD>

			    </TR>

			</TABLE>

		</form>

	</BODY>

</HTML>

Open in new window

0
 
LVL 39

Accepted Solution

by:
Eoin OSullivan earned 500 total points
Comment Utility
Add the following style to the head of the page between the title and closing head tag


<title>::: CoachingSource.com ::: Be a student of YOUR game!</title>
<style type="text/css">
<!--
body {
      margin: 0px;
      padding: 0px;
      height: 100%;
}
</style>
</HEAD>
0
 

Author Comment

by:wilcor14
Comment Utility
eoinosullivan:

That worked. It looks great. I checked it for the mac but it's not working for Safari. Any suggestions on that? Thanks.
0
 

Author Comment

by:wilcor14
Comment Utility
eoinosullivan:

With your help, I figured it out. The <form> tag is the reason the table extends beyond the screen. So I placed the following line of code in at the top:

<style type="text/css">
form{height:100%;margin:0;padding:0}
</style>

Thanks for your guidance.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Due to recent concerns over the inevitable depletion of the current pool of IPv4 addresses and the desire to provide additional functionality for modern devices, an upgrade to IPv6 on my Internet connection was needed for me to explore the world of …
Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now