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

howtogetitrightAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.