SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot shiftless's Avatar
    Join Date
    Mar 2005
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Footer doesn't adjust for expanded content in IE

    I have a FAQ page here that doesn't work quite right in IE:

    http://www.helpfighthiv.org/readyFAQ.htm

    To see the problem, you must view in IE in Windows. Click the question about half way down the page that says "How are the vaccines tested?" abd then scroilldownto view the complete answer. The footer stays at it's position and doean't move to the "new" bottom of the page. I'm not really sure if this is a CSS issue or a javascript one, so my apologies if this is in the wrong forum.

    Here is the style for the footer:

    Code:
    #footer {
    	z-index: 0;
    	width: 805px;
    	clear: both;
    	height: 32px;
    	background-image:  url(../images/footer_bg.jpg);
    	color: #666666
            left: 0;
    	bottom: 0;
    	position: absolute;
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 9px;
    }
    * html #footer{margin-bottom:-1px}/* ie rounding bug*/
    * html #footer {/*only ie gets this style*/
    	\height:34px;/* for ie5 */
    	he\ight:32px;/* for ie6 */
    }
    and in case the javascript is the thing that's messing it up (and who knows maybe someoine here is good at it- I am not.) here is the code that is changing the visibility of the answers on the page:

    Code:
    function expand(theTable,theImg)
    {
    if (document.getElementById(theTable).style.display == 'none')
       {
       document.getElementById(theTable).style.display = 'block';
       document.getElementById(theImg).src='images/onButton.gif';
       }
       else
       {
       document.getElementById(theTable).style.display = 'none';
          document.getElementById(theImg).src='images/offButton.gif';
    
       }
    }
    I just can not get that footer to do the right thing and make room for the expanded content. If I need to post instead in the javascript forum, please let me know.

    Thanks,
    Michael

  2. #2
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suspect that the problem originated from your absolute position. Try to clear that property and let the footer natural flow to the bottom of the page.
    Last edited by kefeso; Jul 25, 2006 at 15:11.

  3. #3
    Eat, Sleep, *********! J. Pederson's Avatar
    Join Date
    Sep 2001
    Location
    Wisconsin
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes remove that and it should work fine.
    James Pederson - Web Design & Development
    phone: 608.243.7898
    e-mail: james@transparentacoustics.com
    websites: clear speaker box | website development madison

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You are both missing the point lol

    The footer is a 100% high footer that sits on the bottom of thw window regardless of the content above unless the content is greater than the viewport and then the footer sits at the bottom of the content.

    The problem is that ie is forgetting where the bottom is when the javascript expands the elements.

    You can use another 100% high footer method which is more reliable and involves negative margins.

    Place the footer outside of #outer and then change the positioning to static but drag the element into the viewport with a negative margin. This will work fine with the javascript and will expand and contract correctly.

    Code:
    #feet {margin-left: 31px; padding-top: 10px; color: #666666; width: 615px;}
    #footer {
     z-index: 0;
     width: 805px;
     clear: both;
     height: 32px;
     background-image:  url(../images/footer_bg.jpg);
     color: #666666;
     margin-top:-32px;
     position:relative;
     font-family: verdana, arial, helvetica, sans-serif;
     font-size: 9px;
    }
    * html #footer{margin-bottom:-1px}/* ie rounding bug*/
    Then move the footer outside of #outer as follows:
    Code:
     </div>
    </div>
    <!-- end outer div -->
    <!-- start footer -->
    <div id="footer">
     <div id="credits"> <a href="credits.htm"  class="footerWhite" onFocus="this.blur()">Site Credits &raquo;</a> </div>
     <div id="feet">
      <div id="DPH"> <a class="dph" href="http://www.dph.sf.ca.us/DPHMenu.htm" onFocus="this.blur()">DPH Home &raquo;</a>
       <div class="clear"></div>
      </div>
      <span class="picCaption">&copy; 2006, T. Kennedy & Department of Public Health City and County of San Francisco</span> </div>
    </div>
    <!-- end footer -->
    </body>
    </html>
    The code is tried and tested locally and works fine

  5. #5
    SitePoint Zealot shiftless's Avatar
    Join Date
    Mar 2005
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks

    Thanks Paul- works brilliantly.

    I did change the placement of the foter to outside the #outer DIV on that page and one other FAQ type page on the site, but i found the footer still worked in it's original position on other pages without placing it outisde the #outer DIV. Is this expected behavior?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    but i found the footer still worked in it's original position on other pages without placing it outisde the #outer DIV. Is this expected behavior?
    The method you originally used to place the footer is fine using absolute positioning as the problem will only occur when dynamic elements are present. I have seen this on other sites and IE seems to forget where the bottom is once the element has expanded. There may indeed be other fixes for this and could possibly be layout issues ior something similar on the expanded elements or content.

    If you have dynamic content then the second footer method is a better option because it behaves much better


Bookmarks

Posting Permissions

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