Member Avatar for richholt

If anyone can solve this, I would honestly think you're a genius. I've been using html/css 10+ years and this has bugged me for days!

You can see the problem if you view and click the "course outline" link to expand content. Content expands but footer stays where it was originally.

I've tried all sorts of footer positioning techniques, but IE6 has troubled me far too much. It works fine in all other browsers!

Any help would be hugely appreciated!

Basic layout is done by

<container>
<header>
<content>
<footer>
</container>

I understand the current method is using padding-bottom on the #content div which is the value of the footer height and that IE6 doesn't play well with padding.

  • 4 Contributors
  • 3 Replies
  • 110 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

This is a classic IE6 reflow/hasLayout issue rather than a jQuery bug. described the symptom well; 's sticky-footer idea is a solid general solution for static layouts, and was right to look at clearing/overflow — but in IE6 the container or footer can fail to recalculate its height when inner content is shown, so the footer looks “stuck.”

A reliable first step is to make sure the footer is in normal flow (not position:absolute/fixed) and that the parent that should expand actually has layout in IE6. Forcing hasLayout usually fixes the reflow. Example CSS to try (apply only to affected elements or within an IE-only stylesheet):

/* trigger hasLayout in IE6/7 */
#container { zoom: 1; }
/* or as an alternate IE6-only trigger:
   * html #container { height: 1%; }
*/

If the CSS tweak alone doesn't help, force a reflow right after jQuery finishes the show/slide toggle. Two inexpensive tricks that work in IE6: read a layout property, or nudge zoom. Example callback pattern:

$('#myToggle').slideDown(300, function() {
  // reading offsetHeight forces a reflow
  this.offsetHeight;
  // or nudge container zoom
  $('#container').css('zoom', '1');
});

Quick checklist while debugging: confirm the page is in standards mode (valid DOCTYPE), ensure no fixed heights or absolutely positioned parent is constraining the footer, remove stray floats (or use a proper clearfix), and test changes only in IE6 (use conditional CSS). If those fixes still fail, try calling a small JS reflow (as above) inside the toggle callback — that almost always resolves the “footer won’t move” symptom in IE6.

Recommended Answers

All 3 Replies

Member Avatar for Cragdo

Hi,

I had a similar problem with a Jquery toggle container which I fixed by placing overflow: auto; inside the container and for good measure I created a class to clear the container:

.clear { clear: both; }

and placed it under the container in my html

<div id="slickbox">...</div>
<div class="clear"></div>

I don't know if you have the same problem but it worked for me.

Member Avatar for MidiMagic

The Internet was not really meant for you to place a footer at the bottom of the screen.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.