Here's how my page structure looks like:
<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>
Whenever I click on the li element with an id of open, the div with a class of slide slides down. The entire header is pushed down as well, but the content div remains above the header's content, causing the header to go under the content div. This issue specifically occurs in IE and despite trying various CSS modifications, the problem persists.
Below is the CSS code that I have attempted:
.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%;}
And here's the JQuery script I am using:
$("#open").click(function(){
$(".slide").slideToggle(300);
return false;
});