Table row height in Firefox
Due to existing restrictions on DIV tags working well on browser platforms for a particular fluid layout, I would like to use a combination of tables and DIVs for layout. However, several questions remain.
In FIRST, the problem is that in Firefox the table height for my footer is rendered differently than IE when using a 100% height table. It happens that in Firefox the footer row for a table has a height that is higher than the height specified for the table row. This, in turn, discards the footer layout.
Here is the page code:
<html>
<head>
<meta NAME="DESCRIPTION" CONTENT="Cold Fusion Applications and Development">
<meta NAME="keywords" CONTENT="cold fusion, coldfusion, sql server, graphic design, houston, texas, tx, web developer, web development, e-commerce, survey, surveys, web applications, php, mysql, access, foxpro, sql, perl, shopping cart, web programming, macromedia, webmaster, html, cfml, xml, 77057, cfware, cfware.com, www.cfware.com, hosting, dhtml, dynamic html, web programmer, graphic designer, website, resume">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<!-- BODY -->
<body topmargin="0" bottommargin="0" rightmargin="0" leftmargin="0">
<!--TABLE I -->
<table class="fullheight" width="100%" height="100%" min-height="100%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr><td height="116" align="center" valign="top">
<!-- HEADER -->
<div class="header">
<div class="lfc">Cornerstone</div>
<div class="rfl"><img src="c4sqlogo.gif" width="295" height="68"></div>
<div class="lf4">Foursquare</div>
</div>
<div class="spacer"></div>
<!-- HEADER END -->
</td>
</tr>
<tr><td align="center" valign="center" bgcolor="#FFFFFF">
<!-- CONTENT -->
<div class="content">
<table class="fullheight" width="100%" height="100%">
<tr>
<td></td>
<td></td>
<td></td>
</tr><tr>
<td></td>
<td align="center" valign="middle">
<h1 class="font-black">Cornerstone Foursquare Church</h1>
<br>
<h2>7791 Hillbarn Dr. Houston, TX 77040</h2>
<br>
<h2>(713) 856 - 7773</h2>
<br>
<br>
<h3>Service Times:<br>Sunday Morning Worship 10:30AM<br>Sunday Evening Bible Study 6:00PM
<br>Wednesday Evening Bible Study and Prayer 7:00PM</h3>
</td>
<td></td>
<tr>
<td></td>
<td></td>
<td></td>
</tr><tr>
</table>
</div>
<!-- CONTENT END -->
</td>
</tr>
<tfoot height="28"><td height="28" align="center" valign="middle" bgcolor="#FFFFFF">
<!-- FOOTER -->
<div class="clearspacer"><img src="1.gif" height="10" width="1"></div>
<div class="footer"><div class="footertext"><a href="http://www.c4sq.org"> w w w . c 4 s q . o r g </a></div></div>
<!-- FOOTER END -->
</td>
</tr>
</table>
<!-- TABLE I END -->
</body>
</html>
And here is the code for the sieve sheet:
html, body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: :#a02f1d;
height: 100%;
width: 100%;
}
a {
color: #ffffff;
text-decoration: none;
font-size: 12;
font-weight: 500;
}
.header {
color: #ff0000;
margin: 0 auto;
width: 760px;
height: 116px;
background-image: url(stripe.gif);
background-repeat: repeat-x;
}
.fullheight {
height:100%;}
.lf4 {
float: left;
margin-top: 0px;
clear: left;
width: 240px;
margin-left: 190px;
color: #a02f1d;
font-size: 26px;
font-weight: semi-bold;
font-style: italic;
}
.lfc {
float: left;
margin-top: 8px;
margin-left: 20px;
color: #a02f1d;
font-size: 48px;
font-weight: semi-bold;
font-style: italic;
}
.rfl {
float: right;
margin-top: 24px;
margin-right: 20px;
clear: right;
}
.content {
margin: 0 auto;
width: 760px;
overflow: hidden;
color: :#a02f1d;
}
.spacer {
background-color:#a02f1d;
margin: 0 auto;
width: 760px;
height: 4px;
overflow: hidden;
}
.clearspacer {
background-color:#000000;
}
.footer {
color: #ffffff;
background-color:#a02f1d;
margin: 0 auto;
width: 760px;
height: 30px;
clear: both;
}
.footertext {
color:#ffffff;
margin-top: 6px;
font-size: 12px;
}
The SECOND problem relates to modifying an existing layout so that there is a vertical area centered at 760 pixels wide that is rendered in a different color tint from the surrounding viewport. The main difficulty is that in order for my footer to stick to the bottom in both browsers and resize with the viewport, I had to accept the table layout again. However, the current strategy is to use as few sockets as possible in order to benefit from the speed and clarity of using DIVs. I'd rather use the DIV layout, excluding the table layout, if it wasn't for the seemingly intractable problem of getting the working sticky footer to work with the fluid layout of the DIV.
source to share
I know this is completely unrelated, but I recommend you use the w3c validator to validate your HTML once in a while.
source to share
A few tips:
Add doctype - if you are using the correct one, you can get IE in standards mode rather than quirks mode http://www.quirksmode.org/css/quirksmode.html , so the behavior will be more consistent across IE and other browsers.
As suggested by K4emic - check your markup.
Add css reset to default null margins and paddings, a good starting point here http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ .
You will find that these things make it much easier to find layout errors. Otherwise you just don't know where to start, is it your css, your html, default browser styles, IE render mode ......?
source to share
As other respondents noted, you first need to make sure your document is well-formed. That is, it must comply with the DTD. I'll point out one question that's easy to spot:
<tfoot height="28"><td height="28" align="center" valign="middle" bgcolor="#FFFFFF">
<!-- FOOTER -->
<div class="clearspacer"><img src="1.gif" height="10" width="1"></div>
<div class="footer"><div class="footertext"><a href="http://www.c4sq.org"> w w w . c 4 s q . o r g </a></div></div>
<!-- FOOTER END -->
</td>
</tr>
</table>
In this snippet, you can see that your
<tfoot>
not closed. It must contain
<tr>
but it is missing.
These small bugs are probably causing the inconsistent behavior you are seeing. After they are fixed, if you still get the behavior, you can look at the browser differences. Some HTML editors, such as Frontpage and Dreamweaver, can be configured to deliver DTD compliant code and highlight areas that do not match. I would recommend using it.
source to share