...

View Full Version : Firefox Bottom of Page Gap?!



jljr222
02-20-2005, 07:58 PM
Well, I seem to have this problem with the coding of this layout I made. Everything looks smooth in IE, but in Firefox I have this HUGE Gap of space at the end of the page. No Idea what is up with it, but any help with it would be great! Thanks in advanced.



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

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Deceptive Intentions ::&nbsp;Counter-Strike Clan</title>
<link href="./style.css" rel="stylesheet">
</head>

<body bgcolor="#f5f5f5" rightmargin="0" leftmargin="0" bottommargin="0" topmargin="0">
<div align="center">
<table width="800" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr height="35">
<td rowspan="2" width="40" background="images/side_left.gif"></td>
<td align="left" valign="top" bgcolor="white" width="720" height="35" background="images/top_bg.gif">
<div align="left">
<a title="Wanna start over?" href="http://deceptiveintentions.recongamer.com"><img src="images/links/home.gif" alt="" height="35" width="83" border="0"></a><a title="Learn more about the team!" href="./?id=roster"><img src="images/links/roster.gif" alt="" height="35" width="83" border="0"></a><a title="Come join us in our pubs..." href="./?id=pubs"><img src="images/links/pubs.gif" alt="" height="35" width="83" border="0"></a><a title="Providing awesome files for any cs fan!" href="./?id=files"><img src="images/links/files.gif" alt="" height="35" width="83" border="0"></a><a title="Learn about DI's history..." href="./?id=history"><img src="images/links/history.gif" alt="" height="35" width="83" border="0"></a><a title="Join our community!" href="http://deceptiveintentions.recongamer.com/cgi-bin/forums/"><img src="images/links/forums.gif" alt="" height="35" width="83" border="0"></a><a title="Were open for discussion..." href="./?id=contact"><img src="images/links/contact.gif" alt="" height="35" width="83" border="0"></a></div>
</td>
<td rowspan="2" width="40" background="images/side_right.gif"></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="white" width="720">
<table width="720" border="0" cellspacing="0" cellpadding="0" background="images/banner.jpg" height="200">
<tr>
<td></td>
</tr>
</table>
<table width="720" border="0" cellspacing="0" cellpadding="0" background="images/top_bg.gif" height="35">
<tr>
<td align="right" valign="middle">
<table class="normal" width="100%" border="0" cellspacing="0" cellpadding="3" height="100%">
<tr>
<td>Welcome to Deceptive Intentions, please <a href="http://deceptiveintentions.recongamer.com/cgi-bin/forum/index.php?act=Reg&CODE=00">register</a>.</td>
<td align="right" valign="middle">Login: <input type="text" name="textfieldName" size="16"> <input type="password" name="textfieldName" size="16"> <input type="submit" name="submitButtonName" value="Login"></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="720" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td align="left" valign="top" width="200" background="images/content_side.gif">
<table width="199" border="0" cellspacing="0" cellpadding="0" background="images/nav/headlines.gif" height="25">
<tr>
<td></td>
</tr>
</table>
<table width="199" border="0" cellspacing="0" cellpadding="0">
<tr height="2">
<td height="2" background="images/side_top.gif"></td>
</tr>
<tr>
<td background="images/side_mid.gif">
<table class="normal" width="100%" border="0" cellspacing="0" cellpadding="3" height="100%">
<tr>
<td align="left" valign="top">No new headlines...</td>
</tr>
</table>
</td>
</tr>
<tr height="2">
<td height="2" background="images/side_bot.gif"></td>
</tr>
</table>
<table width="199" border="0" cellspacing="0" cellpadding="0" background="images/nav/publics.gif" height="25">
<tr>
<td></td>
</tr>
</table>
<table width="199" border="0" cellspacing="0" cellpadding="0">
<tr height="2">
<td height="2" background="images/side_top.gif"></td>
</tr>
<tr>
<td background="images/side_mid.gif">
<table class="normal" width="100%" border="0" cellspacing="0" cellpadding="3" height="100%">
<tr>
<td align="left" valign="top">
<table class="normal" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/server_icon.gif" alt="" height="16" width="16" border="0"></td>
<td>66.208.103.55:27015</td>
<td><a href="http://deceptiveintentions.recongamer.com/stats/">Statistics</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="2">
<td height="2" background="images/side_bot.gif"></td>
</tr>
</table>
<table width="199" border="0" cellspacing="0" cellpadding="0" background="images/nav/recruits.gif" height="25">
<tr>
<td></td>
</tr>
</table>
<table width="199" border="0" cellspacing="0" cellpadding="0">
<tr height="2">
<td height="2" background="images/side_top.gif"></td>
</tr>
<tr>
<td background="images/side_mid.gif">
<table class="normal" width="100%" border="0" cellspacing="0" cellpadding="3" height="100%">
<tr>
<td align="left" valign="top">
<table class="normal" width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td>daleGEND</td>
</tr>
<tr>
<td bgcolor="white">Riddick</td>
</tr>
<tr>
<td>Free Kill</td>
</tr>
<tr>
<td bgcolor="white"><a href="./?id=reoster">more...</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="2">
<td height="2" background="images/side_bot.gif"></td>
</tr>
</table>
<table width="199" border="0" cellspacing="0" cellpadding="0" background="images/nav/matches.gif" height="25">
<tr>
<td></td>
</tr>
</table>
<table width="199" border="0" cellspacing="0" cellpadding="0">
<tr height="2">
<td height="2" background="images/side_top.gif"></td>
</tr>
<tr>
<td background="images/side_mid.gif">
<table class="normal" width="100%" border="0" cellspacing="0" cellpadding="3" height="100%">
<tr>
<td align="left" valign="top">
<table class="normal" width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="50%"><a href="#">Unknown Team</a></td>
<td width="25%">
<div align="center">
15-0</div>
</td>
<td width="25%"><font color="#10c333"><b>Win</b></font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="2">
<td height="2" background="images/side_bot.gif"></td>
</tr>
</table>
<table width="199" border="0" cellspacing="0" cellpadding="0" background="images/nav/sponsors.gif" height="25">
<tr>
<td></td>
</tr>
</table>
<table width="199" border="0" cellspacing="0" cellpadding="0">
<tr height="2">
<td height="2" background="images/side_top.gif"></td>
</tr>
<tr>
<td background="images/side_mid.gif">
<table class="normal" width="100%" border="0" cellspacing="0" cellpadding="3" height="100%">
<tr>
<td align="left" valign="top">
<div align="center">
<a title="Fraghard.com Gaming" href="http://www.fraghard.com"><img src="images/sponsors/fraghard.gif" alt="" height="31" width="172" border="0"></a></div>
</td>
</tr>
</table>
</td>
</tr>
<tr height="2">
<td height="2" background="images/side_bot.gif"></td>
</tr>
</table>
</td>
<td align="center" valign="top" width="520">
<table width="100%" border="0" cellspacing="0" cellpadding="0" background="images/nav/bg.gif" height="25">
<tr>
<td><img src="images/nav/news.gif" alt="" height="25" width="142" border="0"></td>
</tr>
</table>
<table class="normal" width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td align="left" valign="top">
<font color="#AD0000" style="font-size:14px;"><b>Welcome to the new DI...</b></font><br>
Wow, Finally got the new layout up and I think it is pretty sick. I hope that you enjoy the new look and I hope to keep this more updated than in the past. Also, when you guys get a chance, be sure to register at our forums so you can get in contact with the clan or if you have some information for us. Well, this is all for now. Hope to see you all later. Peace...<br>
<br>
<b><a href="#">Full Story</a></b> | <a href="#">20 Comments</a></td>
</tr>
<tr height="20">
<td height="20">Copyright &copy; 2005 Deceptive Intentions.</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>

</html>


Here is the style.css



BODY {COLOR: #797979; FONT-SIZE: 11px; FONT-FAMILY: Tahoma;}

div {height:100%;}

a:active,a:visited,a:link {color: #C80000; text-decoration: none; font-family: Tahoma;}

a:hover {color: #8D0000; text-decoration: none; font-family: Tahoma; font-size:}

.normal {COLOR: #797979; FONT-SIZE: 11px; FONT-FAMILY: Tahoma;}

input {padding: 1px; COLOR: #797979; FONT-SIZE: 11px; FONT-FAMILY: Tahoma;}

select {padding: 1px; COLOR: #797979; FONT-SIZE: 11px; FONT-FAMILY: Tahoma;}

textarea {padding: 1px; COLOR: #797979; FONT-SIZE: 11px; FONT-FAMILY: Tahoma;}

chilipie
02-20-2005, 08:08 PM
Use this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> instead of your current DTD.

Validate (http://validator.w3.org/) both your HTML and CSS files, and rectify any errors.

If the problem still persist, post back and we'll do our best to fix the problem ;) .

jljr222
02-20-2005, 08:24 PM
Thanks for the quick reply, but validating gave me some wacked out errors that I just don't understand, like...



#

Line 11, column 53: there is no attribute "MARGINHEIGHT"

<body bgcolor="#f5f5f5" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">


#

Line 11, column 69: there is no attribute "MARGINWIDTH"

...f5" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">


#

Line 11, column 83: there is no attribute "TOPMARGIN"

...height="0" marginwidth="0" topmargin="0">


#

Line 13, column 72: there is no attribute "HEIGHT"

...r="0" cellspacing="0" cellpadding="0" height="100%">


#

Line 14, column 15: there is no attribute "HEIGHT"

<tr height="35">





Some clarification would be appreciated.

chilipie
02-20-2005, 08:28 PM
Thanks for the quick reply, but validating gave me some wacked out errors that I just don't understand, like...

They're not wacked out errors, they explain it on the page.

marginheight, topmargin etc. should be done with CSS (Cascading Style Sheets). To accomplish what you wanted to do with the margin attributes, you'll need a snippet of CSS that looks like this:


html, body {
margin: 0;
padding: 0;
}


Table cells/rows expand to fit with the content that is in them, and should not need heights setting.

rmedek
02-20-2005, 09:35 PM
Table cells/rows expand to fit with the content that is in them, and should not need heights setting.

...which is what's causing all that extra space in FF. Take out the "height="100%"" attribute in the first table tag.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum