The footer does not appear to be clearing correctly in IE6. It's crashing into the header area. Any changes I make to ie6.css seem to have no effect.

CommentFileSizeAuthor
#4 zen_clear_footer.diff242 bytesthisgeek

Comments

Anonymous’s picture

Anonymous (not verified) commented

Hi

This problem occurs in IE 7 as well.

I believe it is caused by the clear fix solution (http://www.positioniseverything.net/easyclearing.html) used in zen not being compatible with IE when the DOCTYPE is strict.

Using the more recent technique for clearing floats (http://www.quirksmode.org/css/clearing.html) seems to work ok in IE 7.

The fix:

#main-inner
{
  overflow: hidden;
  width: 100%;
}

cheers
Nigel

thisgeek’s picture

thisgeek commented

In IE6, your fix successfully clears the footer, but now everything in the main-inner div has disappeared. The culprit appears to be width: 100%. For those following along at home, keep in mind that the default zen theme uses the liquid layout, not the fixed layout.
I'm looking into it. Comments welcome.

thisgeek’s picture

thisgeek commented

I'm having some success putting your CSS in the main div, and not the main-inner div.

That makes it:

#main
{
  position: relative;
  overflow: hidden;
  width: 100%;
}

#main-inner
{
}

(Note: position: relative; was already in the zen css. I did not add it.)

I will test this in other browsers as soon as I get a chance.

thisgeek’s picture

thisgeek commented
StatusFileSize
new zen_clear_footer.diff242 bytes

Here's a quick diff file for the change. I'll follow up tomorrow with some info I collected this afternoon.

thisgeek’s picture

thisgeek commented

It appears to work in Opera 9.64, Chrome 2, Chrome 3 (the developer release for Mac), Firefox 3.0.10, Safari 4, IE6, and IE7. Disclaimer: My testing was hardly rigorous. I just fired up most of the browsers in my office for a quick look.

thisgeek’s picture

thisgeek commented
Status: Active » Needs review
jon nunan’s picture

jon nunan commented

It worked for me, adding it to just #main fixed my layout bug.

Though I had a background image on #main-inner which wasn't visible until I added the lines to it as well.

Countzero’s picture

Countzero commented

The correction worked for IE7, applied to a fixed layout subtheme.

Thanks a lot.

thisgeek’s picture

thisgeek commented
Status: Needs review » Reviewed & tested by the community
grub3’s picture

grub3 commented

I could apply this patch safely and test using IE6.

For the little story, I discovered this bug in a client office while demonstrating a custom theme under IE.
The header and the footer were like stuck on the first quarter of a page.

Hopefuly, I could demonstrate the site on my GNU/Linux laptop.

Thanks for the patch.

grub3’s picture

grub3 commented

Just a quick note that this patch also fixes positioning of header.

RedTop’s picture

RedTop commented

Patch helped me out after struggling for half day to get IE6 to behave nicely. As instructed above I just had to add:

#main {
 overflow: hidden;
 width: 100%;
}

Thanks a lot!

(I only tested this on IE6 and FF3.6 as I just found this thread.)

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Category: bug » support
Status: Reviewed & tested by the community » Fixed

I cannot reproduce this. IE6's footer clears just fine as long I'm using one of the Drupal solutions for the IE 31 stylesheet limit.

I suspect that is your issue. Please see http://john.albin.net/css/ie-stylesheets-not-loading

I need to add that to the README file.

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented

Docs added in #256802: IE limits Drupal to 31 stylesheets total

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Marko B’s picture

Marko B commented
Component: IE Problems » layout.css

Try putting in performance section, CSS to optimize, that should make IE sytlsheet no problem dissapaer and fix this footer problem.