Hi everyone, I just joined today so I can ask this question and hopefully get some help.

I am in the process of building a website and I decided to mock up a layout that would be the base for the whole site. Everything works in the civilized browsers well, but IE7 is being a pita.

Also, please disregard the coloring of the website it's just something temporary so I can visually see where every div ends without adding space for borders.

My problems are the following:

  • I have a div that I use for notifying the user of events (it's called by a notify function and closed with a closeNotify), you can activate it by clicking any of the menu items. The problem is that the div is supposed to occupy the whole viewport of the browser and stay fixed at the top of the viewport, IE7 pushes it to the side hiding the close button.
  • My footer is being ignored completely by IE7, I can't even put into words the atrocities it does to google for help, that's why I came here.

If anyone has any insight, please help!

Requirements for the site include IE7/8, Firefox/Chrome/Safari, IE6 can and does suck it.

  • Wow, I just realized that the thumbnail that DocType generates has the IE bug... /hits head on keyboard repeatedly... ElHernan about 9 years ago

1 answer

This was chosen as the best answer

have no fear cssrockstah is here! .. just kidding...

your layout sucks at ie6, anyway since you're requirement is ie7, here's the fixed version you can check the source or edit it from here

Alternatively you can just add this to your css:

#message {
  position: absolute;
  left: 0;

What it'll do is just overwrite the css you have there, basically position: fixed is somewhat buggy on ancient browsers


I guess I misunderstood you, on what you were trying to achieve, but here's the one you want - promise. The only thing you'll do is change position:absolute to position:fixed.

Basically you just add this to your CSS

#message {
  position: absolute;
  left: 0;
#footer { overflow:hidden }

You also need to move your footer logo after your floated elements, just before your copyright container. Just check the link below and you see what I mean :)

You can view it online here, and edit it here

And it also fixes your disappearing footer in IE7

Answered about 9 years ago by cssrockstah
  • I like how it fixes the position, but it keeps the notification area at the top of the page, not of the viewport which might make it invisible under certain circumstances. And I still have the problem with the footer not showing up at all. Still, thanks for the help! ElHernan about 9 years ago
  • I see, I've updated the solution, this time, it will be always on top of the viewport and NOT only the page cssrockstah about 9 years ago
  • You sir are indeed a rock star... This is perfect. Thanks a bunch. ElHernan about 9 years ago