View Full Version : Text overlapping footer in IE7

05-25-2007, 08:05 PM
So I'm having issues with a site that I inherited with my current job (meaning I wasn't the designer, but I had to take over it's upkeep).

In IE 7 only, I'm having issues with the text overlapping the footer on the bottom of the page. For an example, view http://www.stevenswater.com/contact.aspx in IE 7 then IE 6 or FF.

The CSS files used by the site are

In layout.css I tried playing around with #footer, which is the div id that is being overlapped with the text, but I can't seem to figure out any solutions.

Any ideas?



05-25-2007, 08:33 PM
Your domain was down when I tried to look at this. Most likely it's a known layout issue with the IE7 rendering engine. Try adding the style:

zoom: 1;

to your footer element. If that doesn't work, add it to several of the surrounding elements. If that doesn't work, get your site working so that we can see the code.

05-25-2007, 08:48 PM
Thanks for the reply, I'll try it out.

As for the domain not working, it's working for me currently. If you're still having issues, what is the error you're seeing?



05-25-2007, 08:54 PM
Okay, so that didn't work...

I also tried

* html footer {
zoom: 1;

and that didn't work either.

05-26-2007, 01:47 AM
In IE 7 only, I'm having issues with the text overlapping the footer on the bottom of the page.
Your example serves as a warning against hacking living browsers.

Look at your CSS:

clear: right;
position: relative;
width: auto;
min-width: 300px;
height: expression(35 + "em");
min-height: 35em;
padding:0px 10px 10px 10px;
z-index: 2;
padding-left: 20px;
padding-right: 20px;

The red part was originally added to solve for IE6 not supporting min-height.

This hack depended on:

Non-IE browsers do not support expressions (http://msdn2.microsoft.com/en-us/library/ms537634.aspx).
IE6 (and earlier) suffers from the expanding box problem (http://www.positioniseverything.net/explorer/expandingboxbug.html).

The break-down in IE7 shows the danger of hacking living browsers (http://www.digital-web.com/articles/keep_css_simple/). IE7 now satisfies condition 1 but not condition 2 because the expanding box problem was fixed in this version.

What you should do? Note that IE7 now supports min-height. So you should concentrate on feeding IE6 (and earlier) with the style #content {height: 35em} while hiding it from IE7 and other browsers.

For this you can use conditional comments (http://www.quirksmode.org/css/condcom.html) in your HTML to link to a separate style sheet for IE6, or you can use a safe hack targeting IE6, but not IE7:

* html #content {
height: 35em;