...
PDA

Footer Problem from FF to IE - I think it has to do with minheight

CSSQuest
03-11-2009, 03:07 PM
Hey Guys,

I posted a thread yesterday about a footer problem I was having and got some great responses that helped me get everything working appropriately - or at least I thought they did. I had been testing solely on Firefox (a newbie mistake, but what can I say I *AM* a newbie). I began checking the layout in Safari, Opera, and IE this morning and found that while it works great on Safari and Opera it doesn't load the footer in the right position in IE. (It loads at the very top of the page)

I think it has to do with the min-height attribute I use in my wrap - and the wrap is what I have the footer bottom: 0px set to. I could be way off but thats where I've been looking.

An Overview of the code :

/* Footer for both Main and Informational Pages */
#footer_global
{
background-color: #FFFFFF;
font-family: Arial, Verdana, Helvetica, sans-serif;
position: absolute;
left: 0px;
width: 812px;
bottom: 0px;
clear:both;
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link href="css_layout.css" rel="stylesheet" type="text/css" />
<link href="css_fonts.css" rel="stylesheet" type="text/css" />
<SCRIPT Language="JavaScript">
<!-- hide from old browsers - Date Javascript
function GetDay(intDay){
var DayArray = new Array("Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday")
return DayArray[intDay]
}

function GetMonth(intMonth){
var MonthArray = new Array("January", "February", "March",
"April", "May", "June",
"July", "August", "September",
"October", "November", "December")

return MonthArray[intMonth]
}

function getDateStrWithDOW(){
var today = new Date()
var year = today.getYear()
if(year<1000) year+=1900
var todayStr = GetDay(today.getDay()) + ", "
todayStr += GetMonth(today.getMonth()) + " " + today.getDate()
todayStr += ", " + year
return todayStr
}
//-->
</SCRIPT>
<style type="text/css">
body, html
{
margin:0;
padding:0;
background:white;
min-width:812px;
padding:0;
height: 100%;
width: 100%;
font-family:arial, serif;
}

/* Main Content Wrap */
#body_container {
font-family: helvetica,;
padding:0;
position: absolute;
left: 0px;
top: 216px;
width: 812px;
z-index: 0;
padding-bottom: 140px;
height:100%;
}

/* Whole Page Wrap */
#site_container {
background: #333333;
font-family: helvetica,;
position: absolute;
left: 50px;
top: 50px;
width: 812px;
min-height: 642px;
z-index: 0;
}

</style>
</head>
<body bgcolor="#FFFFFF">
<div id="site_container"><!-- Begin Global Container/Wrap -->

<div id="header_global">
<table id="Global_Header" width="812" height="216" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="images/global_header_01.jpg" width="480" height="51" alt=""></td>
<td valign="bottom" align="right"><!-- Date Insertion -->
<span class="font_header_date">
<SCRIPT Language="JavaScript">
<!-- hide from old browsers
document.write(getDateStrWithDOW())
//--></SCRIPT>
</span>&nbsp;&nbsp; </td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="3" width="480" height="52" alt=""><span class="font_header_subtitle">We're dedicated to providing trusted answers to all your worship facility design</span> <span class="font_header_subtitle">and construction questions. Simply choose one of the options below!</span> </td>
<td>&nbsp;</td>
<td background="images/global_sponsors_01.jpg">&nbsp;</td>
</tr>
<tr>
<td rowspan="3"><a href="index.html"><img src="images/global_header_07.jpg" width="157" height="104" alt="Ask_Bob" border="0"></a></td>
<td rowspan="3"><a href="main_P3_input.html"><img src="images/global_header_08.jpg" width="161" height="104" alt="Project_Pricing_Profiler" border="0"></a></td>
<td rowspan="3"><a href="main_identify_input.html"><img src="images/global_header_09.jpg" width="162" height="104" alt="Identity_Local_Companies" border="0"></a></td>
<td rowspan="3"><a href="main_workshops_input.html"><img src="images/global_header_10.jpg" width="163" height="104" alt="Workshop_Opportunities" border="0"></a></td>
<td height="21" background="images/global_sponsors_01.jpg"><img src="images/global_header_11.jpg" width="169" height="21" alt=""></td>
</tr>
<tr>
<td background="images/global_sponsors_01.jpg"><a href="http://www.churchsolutionsmag.com/" target="_blank"><img src="images/global_header_12.jpg" width="169" height="83" alt="Featured_Sponsor" border="0"></a></td>
</tr>
</table>
</div><!-- End Header Div -->
<div id="body_container"><!-- Main Content Container/Wrap -->
<div id="body_main_global"><a href="main_bob_thankyou.html"><img src="images/index_body.jpg" width="644" height="286" alt="Ask_Bob" border="0"></a></div>
<div id="sponsors_global">
<table id="Global_Sponsors" width="170" height="277" border="0" cellpadding="0" cellspacing="0" background="images/global_sponsors_01.jpg">
<tr>
<td align="right"><img src="images/global_sponsors_bar.jpg" width="170" height="9" alt=""></td>
</tr>
<tr>
<td align="right"><img src="images/global_sponsors_02.jpg" width="163" height="19" alt=""></td>
</tr>
<tr>
<td align="right"><a href="http://www.csdus.com" target="_blank"><img src="images/global_sponsors_03.jpg" width="163" height="89" alt="CSD" border="0"></a></td>
</tr>
<tr>
<td align="right"><a href="http://trane.com/Default.asp" target="_blank"><img src="images/global_sponsors_04.jpg" width="163" height="71" alt="Trane" border="0"></a></td>
</tr>
<tr>
<td align="right"><a href="http://www.dickersonandassociates.com/" target="_blank"><img src="images/global_sponsors_05.jpg" width="163" height="98" alt="Dickerson_And_Associates" border="0"></a></td>
</tr>
</table>
</div><!-- End Sponsors List Div -->
</div><!-- End MainContent Container/Wrap Div -->
<div id="footer_global">
<table id="Global_Footer" width="812" height="140" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9"><img src="images/global_footer_01.jpg" width="479" height="17" alt=""></td>
<td rowspan="3" background="images/global_footer_02.jpg" width="164" height="93" alt="" / align="right"><table width="95%">
<tr>
<td><p class="font_footer_body">The National Association of Church Design Builders is a national network of companies who is dedicated to a certified high standard of designing and building Worship Facilities. Trusted Answers.</p></td>
</tr>
</table></td>
<td rowspan="3"><a href="index.html"><img src="images/global_footer_03.jpg" width="169" height="93" alt="Brought_To_You_by_NACDB" border="0"></a></td>
</tr>
<tr>
<td valign="top" align="right"><a href="info_building_main.html"><span class="font_footer_nav">BUILDING A CHURCH&nbsp;&nbsp;</span></a></td>
<td><img src="images/global_footer_05.jpg" width="3" height="21" alt=""></td>
<td valign="top" align="center"><a href="info_qualifications_main.html"><span class="font_footer_nav">OUR QUALIFICATIONS</span></a></td>
<td><img src="images/global_footer_07.jpg" width="4" height="21" alt=""></td>
<td valign="top" align="center"><a href="info_resources_main.html"><span class="font_footer_nav">CHURCH RESOURCES</span></a></td>
<td><img src="images/global_footer_09.jpg" width="3" height="21" alt=""></td>
<td valign="top" align="center"><a href="info_about_main.html"><span class="font_footer_nav">ABOUT NACDB</span></a></td>
<td><img src="images/global_footer_11.jpg" width="3" height="21" alt=""></td>
<td valign="top" align="left"><a href="info_contact_main.html"><span class="font_footer_nav">&nbsp;&nbsp;CONTACT US</span></a></td>
</tr>
<tr>
<td colspan="9"><img src="images/global_footer_13.jpg" width="479" height="55" alt=""></td>
</tr>
<tr>
<td colspan="11" background="images/global_footer_14.jpg" width="812" height="47" alt="Copyright_Information" align="center"><span class="font_footer_copyright">© 2008 National Association of Church Design Builders • 1000 Ballpark Way • Arlington, Texas 76011</span> <br />
<span class="font_footer_copyright">Phone: 817.200.2622 • Toll Free: 866.416.2232 • Fax: 817.275.4519</span> </td>
</tr>
</table>
</div>

</div><!-- End Container/Wrap -->
</body>
</html>

The Site http://nacdb.com/test/index.html

I'd like the footer to site at the bottom of the content. Can anyone give me advice for what I need to fix to get it to work in IE? Thanks in advance!
abduraooft
03-11-2009, 03:37 PM
Do you know why tables for layout is stupi (http://www.hotdesign.com/seybold/)d? Check some good lay-outing techniques at http://bonrouge.com/2c-hf-fixed.php
effpeetee
03-11-2009, 03:39 PM
Check this site out (http://www.hotdesign.com/seybold/).

I might as well tell you. If I don't, somebody else will.

Frank
CSSQuest
03-11-2009, 03:42 PM
I know that tables aren't great, but its a rush job. A coworker gave me the image-ready produced tables prebuilt and I have to have a working version of the main pages within 24 hours - I am changing as much of the content as I can to css but don't have the time to update all of it just yet.

After a presentation tomorrow I'll have time to set up individual divs for the sponsor logos etc.

Halp!
BoldUlysses
03-11-2009, 07:00 PM
Yeek. Absolute positioning/tables for layout overload. As a quick fix, replace all of this:

body, html {
padding:0;
background:white;
min-width:812px;
padding:0;
height: 100%;
width: 100%;
font-family:arial, serif;
}
#body_container {
font-family: helvetica,;
padding:0;
position: absolute;
left: 0px;
top: 216px;
width: 812px;
z-index: 0;
height:100%;
}
#site_container {
background: #333333;
font-family: helvetica,;
position: absolute;
left: 50px;
top: 50px;
width: 812px;
min-height: 642px;
z-index: 0;
}

with this:

body, html {
padding:0;
background:white;
font-family:arial, serif;
}

#site_container {
background: #333333;
font-family: helvetica;
position: absolute;
left: 50px;
top: 50px;
width: 812px;
height: 642px;
}

#body_container {
font-family: helvetica,;
padding:0;
position: absolute;
left: 0px;
top: 216px;
width: 812px;
}

(I just stripped out a bunch of extraneous statements and changed min-height to height).

Next, go through your code and make sure all your CSS declarations with dimensions have the actual unit attached, e.g.

height: 277px;

not

height: 277;

Third, give your footer div an absolute position measured down from the top of the container, instead of referencing the bottom:

#footer_global
{
background-color: #FFFFFF;
font-family: Arial, Verdana, Helvetica, sans-serif;
position: absolute;
left: 0px;
width: 812px;
top: 502px;
}

Also, on an editorial note, the type on your site is way, way too small.
CSSQuest
03-11-2009, 08:08 PM
Thanks a bunch this helps alot.

I was hoping to use the bottom attribute so I could make the footer global and not have to declare it on each page (several pages are varied in height) - but at least this solution will work until I can present.
BoldUlysses
03-11-2009, 08:12 PM
Thanks a bunch this helps alot.

I was hoping to use the bottom attribute so I could make the footer global and not have to declare it on each page (several pages are varied in height) - but at least this solution will work until I can present.

No problem.

A much, much better solution to the above issue would be to recode your page from scratch, getting rid of the presentational attributes in the HTML, absolute positioning and tables for layout. You'll have half as much code (no foolin') and it will be much easier to work with.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum