Posted by thisgeek on June 4, 2009 at 9:35pm
| Project: | Zen |
| Version: | 6.x-2.x-dev |
| Component: | layout.css |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (fixed) |
Issue Summary
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.
Comments
#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.
#12
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.)
#13
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.
#14
Docs added in #256802: IE limits Drupal to 31 stylesheets total
#15
Automatically closed -- issue fixed for 2 weeks with no activity.
#16
Try putting in performance section, CSS to optimize, that should make IE sytlsheet no problem dissapaer and fix this footer problem.