[jQuery] slideUp(), XHTML & IE8 - margin-top breaking, known issue?
Apologies for the awful title. I've googled around a bit and although
there are issues with IE and the various slide functions, i couldn't
find anything that fixed the issue or offered any advice beyond "lol
IE".
The easiest way to illustrate the problem is with the code snippet
below; click 'section one' and mouseout before the transition
completes, and IE will ignore !important and break the following h2's
margin-top
taking the doctype out fixes the problem, but defeats the point.
anybody run into (and better yet, found a way around) this?
...
<!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">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
function menuToggle(e) {
$(e).each(function(){
$(this).next().toggle('fast')
});
}
</script>
<style type="text/css">
#menu-left { display:block; width:10%; }
#menu-left h2 { margin-top:50px !important; }
#menu-left ul { list-style-type:none; }
#menu-left a, #menu-left ul li a { display:block; }
{ display:block;}
</style>
</head>
<body>
<div id="menu-left">
<h2 onclick="menuToggle(this)">section one</h2>
<ul>
<li><a href="#">dummy content</a></li>
<li><a href="#">dummy content</a></li>
</ul>
<h2 onclick="menuToggle(this)">section two</h2>
<ul>
<li><a href="#">dummy content</a></li>
<li><a href="#">dummy content</a></li>
<li><a href="#">dummy content</a></li>
</ul>
</div>
</body>
</html>