Solved

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

Posted on 2007-12-04
7
217 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 40

Expert Comment

by:Eoin OSullivan
ID: 20409990
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
ID: 20411613
eoinosullivan

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

Expert Comment

by:Eoin OSullivan
ID: 20412349
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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 

Author Comment

by:wilcor14
ID: 20412757
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 40

Accepted Solution

by:
Eoin OSullivan earned 500 total points
ID: 20413054
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
ID: 20413499
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
ID: 20413626
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
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 +…
Suggested Courses

632 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