• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 224
  • Last Modified:

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

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
wilcor14
Asked:
wilcor14
  • 4
  • 3
1 Solution
 
Eoin OSullivanConsultantCommented:
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
 
wilcor14Author Commented:
eoinosullivan

thanks for the feedback. I tried the height in the body but that didn't work. I'll keep trying. thanks.
0
 
Eoin OSullivanConsultantCommented:
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
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
wilcor14Author Commented:
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
 
Eoin OSullivanConsultantCommented:
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
 
wilcor14Author Commented:
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
 
wilcor14Author Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now