Had a tough problem but apparently have gotten it beat for now, wanted to note my solution here for others in Internet Explorer 7 limbo. It seems the Starter Kit positioning/floats for #main and #logo make IE7 unhappy.

I had trouble with the Zen 6.x-2.x-dev starter kit - all the different divs inside #main kept drifting to the upper-left corner.

The solution was: comment out #main "position: relative" in layout.css. Clearing the "float: left" for #logo in pages.css also helped get the divs inside #main to align properly.

Finally to jam the $footer_message down to the bottom I inserted a BR clear="all" around line 222 of page.tpl.php. Thanks for all the work, it was fine in other browsers!

Members fund testing for the Drupal project. Drupal Association Learn more


RedTop’s picture


I was having the same problem: Everything below the header and above the footer message was drifting to the upper right (left sidebar enabled, right sidebar disabled).

This fixed it. :)

delykj’s picture

Thanks for the fix. It works.

JohnAlbin’s picture

Status: Active » Postponed (maintainer needs more info)

That's very odd. I've not seen this behavior. It doesn't exist with an out-of-the-box STARTERKIT theme.

Its possible that something you did conflicts with Zen's CSS, but it would be nice to know what it was so we can fix it.

Miteto’s picture

I was having the same issue just not IE7 but IE8 with compatibility mode turned on. Anyways setting this in ie.css fixed it for me

#main {
  overflow: hidden;

Still to be tested with real IE7 ...

dabro’s picture

Thanks for the fix, I had the same problem - everything was jumbled into the left corner on IE7.

Masterrer’s picture

49.08 KB
47.66 KB
45.66 KB

The same is happening to me when i view the page in IE8 compatibility mode.

I had originally converted the starter theme to have both sidebars on the right, but even reverting to the original layout CSS did not fix this.

In fact I just copied a fresh download of starterkit and proceeded to rename as per readme so it would show up in the theme menu, and after applying the fresh copy of startertkit theme the same bug in ie8 compat mode persisted. Maybe tomorrow I will have a chance to test this with a real IE7 .

Attached are screenshots of the currently developed theme, followed by the same theme under compat mode and a fresh copy of starterkit also under compat mode:

Masterrer’s picture

14.35 KB

Just tested the unmodified starterkit with a real IE7, and can confirm that the bug persists.

crutch’s picture


number6ix’s picture

That worked for me too - I've spent about 3 days trying to fix this, so thank you!

One thing to note, depending on how exactly your footer is done, is that it may be worth trying to add your <br clear="all" /> code to different lines in page.tpl.php . For me this was on line 226 rather than 222 (as it was in HongPong's case). Obviously this will be different for different setups, but had I tried this earlier, I'd have saved a lot of time!

Masterrer’s picture

54.79 KB

I think we need a more elegant fix like Miteto suggested in #4
it works, but isn't perfect.

I still have problems in IE7.

I've attached the picture to illustrate what I mean.

I will work on a better solution today, really hoped the devs would come up with a propper fix...

synesis’s picture

Adding <br clear="all" /> fixed my footer from misaligning in IE 7. Thanks!

nicobo’s picture

Same issue for me, solved (as far as I've checked) by the solutions in this thread.
Thanks a lot (but I'm still looking forward to a patch in zen).

filiptc’s picture

Component: CSS/HTML Markup » IE Problems
Priority: Normal » Critical
Status: Postponed (maintainer needs more info) » Active

@JohnAlbin: I have tested this with a fresh copy of starterkit and the bug does exist.

Fix is needed. #4 works but may break other elements in the page (did for me).


PS: IE7 is still in use by lots of people and site is completely broken with this bug. Tentatively marking as critical.

chris_car’s picture

#main {
  overflow: hidden;

...added to ie.css and fixed the footer layout problem for me in IE7. And I see the same issue in IE7 like the screenshot is showing in comment #10.

mygumbo’s picture

#main {
  overflow: hidden;

added to ie.css and while it fixed the problem of all the divs going to the upper left, it truncated very long posts. Has anyone else had that issue?

JohnAlbin’s picture

Title: IE7 doesn't like #main position:relative in starter kit » broken clearfix class causes overlapping containers in IE7

Found it!

The only edit you need to make is change your ie.css file and change:

* html .clearfix {
  zoom: 1;


.clearfix {
  zoom: 1;

Sorry about that!

JohnAlbin’s picture

Status: Active » Fixed

Fixed in the 2010-01-21 version of 6.x-2.x-dev.

Status: Fixed » Closed (fixed)

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

geerlingguy’s picture

Subscribe - I am still hitting this problem on a few new themes, and I keep forgetting this issue, so I have to continually come back here. Much easier with a subscribe :)

Hankman’s picture

subscribe - I am also experiencing this problem. I will provide details shortly.

Hankman’s picture

45.17 KB

False alarm. My original issue was caused by panels.

On a more interesting note, I discovered another problem while tracking down my original issue. In ie 5.5, the "Main Menu" h2 is visible directly beneath the primary menu links. (see attached). I'm not sure if this is a known issue, but I came across an on-going discussion about the .invisible-element class and its alternative implementation in d7. Because Zen 2.x implements this same ineffective class the discussion is worth monitoring as it improves accessibility and cross browser compatibility.I have already tested several of the proposed solutions from the discussion that have fixed my problem temporarily until a final solution has been committed. Please see the discussion at: http://drupal.org/node/718922. I apologize if this should have been posted elsewhere.

anniegreens’s picture

Just wanted to point out to those who are still having this issue to count their stylesheets. If you're still developing your theme, you probably don't have the CSS optimization turned on (under Site Building > Performance). If you have quite a few modules installed, remember IE only lets you have 31 stylesheets. Turn on the CSS optimization and I bet some of you will notice your problem goes away. The IE stylesheets are added last.

kscott22’s picture

Regarding CSS optimization, be careful with it. I turned it on with a fully developed site and it let to some php issues. On another site, it led to NO stylesheets being loaded. I've read threads where others have had similar issues, possibly related to Drupal 6.19. There's more here: http://groups.drupal.org/node/85024