Footer not clearing in IE6
appellation - June 4, 2009 - 21:35
| Project: | Zen |
| Version: | 6.x-2.x-dev |
| Component: | IE Problems |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | reviewed & tested by the community |
Description
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.
#1
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
#2
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.
#3
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.
#4
Here's a quick diff file for the change. I'll follow up tomorrow with some info I collected this afternoon.
#5
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.
#6
#7
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.
#8
The correction worked for IE7, applied to a fixed layout subtheme.
Thanks a lot.
#9
#10
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.
#11
Just a quick note that this patch also fixes positioning of header.