[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1831
  • Last Modified:

Chrome & IE7 interpreting negative margin differently than Firefox & IE8

Hi,

I am trying to make a dynamic footer - it should move up and down with a resizing of the window. Use pure CSS. Not overlap with contents of the page.

In the attached code there is a difference in behavior between Firefox/IE8 and Chrome/IE7 ( Chrome and Firefox on Mac OSX, IE7/8 on Windows XP). In Firefox/IE8 the footer stops at the bottom of the content div when the height of the window is reduced. In Chrome and IE7 the contents of the footer rides up over the text in the contents div. I want and expect the behavior shown in Firefox/IE8.

How can I have a consistent behavior using CSS ?

Regards,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<style type="text/css">
/*<![CDATA[*/

html, body {
       margin:0;
       padding:0;
       font-size: 12px;
       height:100%;
       background-color: #555555;
}

#page {
    min-height:100%;
    height: auto !important;
    height: 100%;
}


#footer {
        clear: both;
        line-height: 18px; /* was defaulting to 14px for Font in Chrone 18px in IE*/ 
        height: 138px; 
        width: 100%;
        margin-top: 0px;
}
#page {
        margin-bottom: -138px;
}
#front_frame {
        width: 100%;
        height: 120px;
}
#content {
        float:left;
}
/*]]>*/
</style>
</head>
<body>
<div id="page">
  <div id="content">
  Some content <br>
  Some content <br>
  Some content <br>
  Some content <br>
  Some content <br>
  Some content <br>
  Some content <br>
  Some content <br>
  Some content <br>
  Some content
  </div>
</div>
<div id="footer">Contactex-re <iframe frameborder="0" id="front_frame" src="http://www.google.com" name="front_frame"></iframe></div>
</body>
</html>

Open in new window

0
howtogetitright
Asked:
howtogetitright
  • 2
  • 2
1 Solution
 
remorinaCommented:
Hi howtogetitright,

Consider the below structure instead, it's slightly different approach but should give you the same desired behaviour, tested in IE6,7,8,FF, Chrome
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<style type="text/css">
/*<![CDATA[*/

html, body {
       margin:0;
       padding:0;
       font-size: 12px;
       height:100%;
       background-color: #555555;
}

#page {
    min-height:100%;
    height: auto !important;
    height: 100%;
    position:relative;
}


#footer {
        clear: both;
        line-height: 18px; /* was defaulting to 14px for Font in Chrone 18px in IE*/ 
        height: 138px; 
        width: 100%;
        margin-top: 0px;
        bottom:0;
        position:absolute;
}
#front_frame {
        width: 100%;
        height: 120px;
}
#content {
        float:left;
}
#contentwrapper {overflow:hidden;width:100%;overflow:hidden;padding-bottom:138px;}
/*]]>*/
</style>
</head>
<body>
<div id="page">
  <div id="contentwrapper">
    <div id="content">
      Some content <br>
      Some content <br>
      Some content <br>
      Some content <br>
      Some content <br>
      Some content <br>
      Some content <br>
      Some content <br>
      Some content <br>
      Some content
      </div>  
  </div>
  <div id="footer">Contactex-re <iframe frameborder="0" id="front_frame" src="http://www.google.com" name="front_frame"></iframe></div>      
</div>
</body>
</html>

Open in new window

0
 
howtogetitrightAuthor Commented:
Hi remorina,

That nearly work as I expect but in Chrome and IE7 (I have not tested in others yet) if the window is smaller that the height of the footer + content then the page scrolls to the bottom of the page so the footer is visible.

This is not the behavior I expect from the page - I want the top of the content to be visible and the user would scroll down if they want to see the footer.

Do you know if this behavior can be fixed ?

In your example "overflow:hidden:" is repeated. Is this necessary ?

I am surprised this works the way it does - I would have thought the footer would stop riding up the page as soon as it reached the bottom of the padding. It would be great if you could explain why this works :)

Regards,

Regards,
0
 
remorinaCommented:
This is because Google being loaded in the iframe and setting focus to its search field, if you load any other dummy html page it wouldn't act so
0
 
howtogetitrightAuthor Commented:
OK. Thanks. That is working well.
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now