Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Text overlapping footer in IE7

    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
    http://www.stevenwater.com/layout.css
    http://www.stevenwater.com/markup.css
    http://www.stevenwater.com/menu.css

    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?

    Thanks,

    Adam

  • #2
    New Coder
    Join Date
    Apr 2007
    Location
    Silicon Valley California
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    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.

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

    Thanks,

    Adam

  • #4
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, so that didn't work...

    I also tried

    * html footer {
    zoom: 1;
    }

    and that didn't work either.

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Squeak View Post
    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:
    Code:
    #content
    {
    	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;
    	background-color:#FFFFFF;
    }
    The red part was originally added to solve for IE6 not supporting min-height.

    This hack depended on:
    1. Non-IE browsers do not support expressions.
    2. IE6 (and earlier) suffers from the expanding box problem.


    The break-down in IE7 shows the danger of hacking living browsers. 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 in your HTML to link to a separate style sheet for IE6, or you can use a safe hack targeting IE6, but not IE7:
    Code:
    * html #content {
      height: 35em;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •