DIV not pushed down when another div is slided down in IE

Question

My page structure is something like this:

<header>
<div class="slide">
   <!---- some elements here --->
</div>
<nav>
    <ul>
        <li id="open"></li>
        <! --- other parts of the navigation ---->
    </ul>
</nav>
  </header>
   <div class="content">
     <!---- My content goes here ---->
  </div>
<footer>
  <!--- my footer elements --->
</footer>

When I click on li with the id=open, the div with class=slide slides down. The whole header is pushed down with it, but the content div stays over the header's content, that is the header goes under the content div. This problem appears only in IE, I have tried the following css, but it does not change anything in IE.

CSS:

.content{display:block; clear:both; position:relative; top:0; right:0;}
.slide{display:none;background:#ddd;height:130px; width:100%; padding:20px;}
 header{background:#34759a; height:400px; width:100%;}

JQuery:

$("#open").click(function(){
            $(".slide").slideToggle(300);
            return false;
       });

can you show your `header` and `.slide` css? It would be better if you create a fiddle with your code — Raghuveer, Aug 25 '14 at 11:49
I updated my question. Unfortunately, I don't have time to make a fiddle right now. — user3400679, Aug 25 '14 at 11:54
As per the given information it should work.. try setting `position:relative` to header — Raghuveer, Aug 25 '14 at 11:55

score 0 · Answer 1 · edited May 23 '17 at 12:13

0

A few suggestions:

You could try using CSS3 transitions instead of the jQuery animations
Instead of slideToggle(), you could give the class slide a negative margin-top in your css, and then use a jQuery animation to set margin-top: 0 using $('.slide').animate({marginTop: 0}).
Finally, you can run code only for Internet Explorer if that would help. Take a look at If Browser is Internet Explorer: run an alternative script instead.

edited May 23 '17 at 12:13

Community

1
1

answered Aug 25 '14 at 11:55

Zak

1,910
3
16
31

This can't be answer as OP is asking for solution only in IE – Raghuveer Aug 25 '14 at 12:06
I don't understand, I have suggested some different methods which might work more effectively in IE, and also a way which you could single out IE and manually fix the problem – Zak Aug 25 '14 at 12:20

score 0 · Accepted Answer · answered Aug 26 '14 at 06:43

0

It was because of the height of the header, it was set to 400px. I changed it to 100%. And now IE is behaving! :)

CSS:

header{height:100%; width:100%;}

answered Aug 26 '14 at 06:43

user3400679

57
1
11

DIV not pushed down when another div is slided down in IE

2 Answers2