DIV (footer) not being pushed down after toggle on IE

Question

This works fine on FF and IE9 but fails in IE7 and 8.

I have two hidden divs that contain a form inside. Once you click a button the correct div with the form will show below. All of this works fine but in IE7 and 8 the footer will overlap the form and won't be pushed down by the toggle event.

Here is my html (reduced):

    <div class="row" id="contactesp">
        <div class="twelve columns">
            <!-- Contact Form 7 plugin shows the form here -->
        </div>
    </div>
    <div class="row" id="contactmund">
        <div class="twelve columns">
            <!-- Contact Form 7 plugin shows the form here -->
        </div>
    </div>
    <!-- Footer -->
    <footer role="contentinfo" id="content-info">
        <div class="row">Content here</div>
    </footer>

My CSS (some of it):

 #content-info {
     background-color: #1C3F94;
     clear: both;
     color: #FFFFFF;
     float: none;
     margin: 20px -20px 0;
     padding: 0 4%;
     display:block;
 }
 #contactesp, #contactmund {
     display: none;
     height: auto;
     overflow: hidden;
 }

I also added overflow:hidden in the form but to no avail. Here is my JQuery:

    jQuery(document).ready(function ($) {
        $('.enesp').on('click',function(){
            $('#contactmund').hide();
            $('#contactesp').toggle();
        });
        $('.enmund').on('click',function(){
            $('#contactesp').hide();
            $('#contactmund').toggle();
        });
    });

The site is here for the complete code: http://www.institutoespanol.net/contacto/ and the problem shows up when you click on either of the buttons within the maps boxes.

@SACHIN you should discuss here rather than asking him to send the code or better jsfiddle — Arpit Srivastava, Sep 05 '12 at 12:23
ya i knw but when i am checking on ie webdeveloper tool and removing the float and clear then its working fine in my system — supersaiyan, Sep 05 '12 at 13:27
Maybe this link helps you in you reflexion http://stackoverflow.com/questions/5227331/html5-new-elements-header-nav-footer-not-working-in-ie this script create the missing element of html5 for Internet Explorer like footer. — Charles Jourdan, Sep 13 '12 at 14:49

score 2 · Accepted Answer · answered Sep 17 '12 at 09:07

2

Simply set position: relative to the < footer > tag. The overlap problem will get solve.

footer{ position:relative; }

answered Sep 17 '12 at 09:07

sureshunivers

1,753
12
27

Add the above mentioned style either your ie.css (for less than 9 browsers) or foundation.css (common css) – sureshunivers Sep 17 '12 at 09:10
I tried this and though it's not showing in the IE developer tools it is there and there's no effect – Elaine Marley Sep 17 '12 at 09:20
Nevermind the last comment this did the trick. Why Is the position relative needed? – Elaine Marley Sep 17 '12 at 09:26
"zoom:1" style is the problem in IE browsers layout. Please refer [The Power Of ZOOM - Fixing CSS Issues In Internet Explorer](http://www.bennadel.com/blog/1354-The-Power-Of-ZOOM-Fixing-CSS-Issues-In-Internet-Explorer.htm) to clarify your question. – sureshunivers Sep 17 '12 at 09:48

mtk · Answer 2 · 2012-09-14T10:22:25.250

Do a restructure of your html in the following manner,

<html>
    <head></head>
    <body>

        <div class="main-page">
            <!-- All the main content here, all the divs as you want put it at this place. -->
        </div>

        <div class="footer">
            <!-- Footer contents -->
        </div>
    </body>
</html>

and assign this css

.main-page {
    height: 100%;
    padding-bottom:60px;   /* Height of the footer */
}

.footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
}

Probably this will help. This structure has removed some of my ie errors.

As another point of note please check this link for coding a sticky footer. This is more or less the same concept of dealing with the structure of your html page.

This website does not use a sticky footer, if I do this the layout will not be consistent with the design in other pages — Elaine Marley, Sep 17 '12 at 09:21

score 0 · Answer 3 · answered Sep 14 '12 at 07:23

0

I hope this helps!
http://jsfiddle.net/qUESn/1/

answered Sep 14 '12 at 07:23

Nagaraj Chandran

228
1
2
9

DIV (footer) not being pushed down after toggle on IE

3 Answers3