Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    108
    Thanks
    13
    Thanked 0 Times in 0 Posts

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

    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 :
    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;
    }
    Code:
    <!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!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Do you know why tables for layout is stupid? Check some good lay-outing techniques at http://bonrouge.com/2c-hf-fixed.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Check this site out.

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

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Posts
    108
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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!
    Last edited by CSSQuest; 03-11-2009 at 04:13 PM.

  • #5
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Yeek. Absolute positioning/tables for layout overload. As a quick fix, replace all of this:

    Code:
    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:

    Code:
    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.

    Code:
    height: 277px;
    not

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

    Code:
    #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.
    matt | design | blog

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Posts
    108
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Quote Originally Posted by CSSQuest View Post
    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.
    matt | design | blog


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •