Show/hide div problems in IE7 only

[martinj86]

Hello everyone,

I wondered whether someone might be able to help? I've tried and tried to find a solution myself, but nothing seems to work.

I have a horizontal list and when the user clicks on one of these links, a hidden div appears just below the list, filling the width of the overall container (950px).

This works absolutely perfectly on Firefox, Safari and IE8 but doesn't seem to work on IE7 (and possibly less, I haven't been able to check).

In IE7, the div causes the list to break, plonking the final list item on an extra line and (as a result, I presume?) pushing the div further down the page, so it's not flush with the bottom of the list. In fact, it appears just beneath the div with ID "highlightsbar".

Here is the relevant code - I'd be eternally grateful for any suggestions anyone might have!

You can see this problem 'in action' at http://www.totalbackpacker.co.uk. (Interestingly, if I do a quick test with only the relevant bits of code at http://www.martinjefferies.co.uk/test.html, the problem isn't there. I'm not sure if that helps or not?!)

Thanks,

Martin

HTML:

<div id="outer">

<div id="wrapper">

<div id="header">
</div>

<div id="navbar">

<ul>
<li class="left"><a href="#" title="Home"><img src="<?php bloginfo('template_url'); ?>/images/navbar/home.png" alt="Home" /></a></li>
<li><a href="#" title="Explore by country" onClick="toggle('submenu')"><img src="<?php bloginfo('template_url'); ?>/images/navbar/explorebycountry.png" alt="Explore by country" /></a></li>
<li><a href="#" title="Search"><img src="<?php bloginfo('template_url'); ?>/images/navbar/search.png" alt="Search" /></a></li>
<li><a href="#" title="Contact"><img src="<?php bloginfo('template_url'); ?>/images/navbar/contact.png" alt="Contact" /></a></li>
<li class="right"><a href="#" title="About"><img src="<?php bloginfo('template_url'); ?>/images/navbar/about.png" alt="About" /></a></li>

<div id="submenu" style="display: none; z-index:500;">
<div id="submenu-inner">

<?php
$categories = get_categories('child_of=7');
$count = 1; ?>
<div class="left">
Left hand links go here
</div>
<div class="right">
Right hand links go here
</div>
<div class="clearer"></div>
<br /><a href="#" title="Close menu" onClick="toggle('submenu')">Close menu</a>
</div>
</div>

</ul>
<div class="clearer"></div>

<div id="highlightsbar">
<span class="title">Promotion:</span> Promotion info goes here.
</div><!--highlightsbar-->
</div><!--navbar-->

<div id="content">

</div>

</div>

</div>

CSS:

#outer {
margin:0 auto;
background:#E2E2E2;
width:100%;
}

#wrapper {
text-align:left;
width:950px;
margin-left:auto;
margin-right:auto;
background:#FFFFFF;
padding:0 0 50px 0;
}

#header {
background:#be023a;
height:100px;
width:950px;
margin:0;
padding:0;
}

#navbar {
background:#cc0000 url('http://www.totalbackpacker.co.uk/wp-content/themes/totalbackpacker/images/navbar.jpg') repeat-x;
height:70px;
width:950px;
}

#navbar ul {
float:left;
list-style:none;
margin:7px 0 0 10px;
padding:0;
height:40px;
}

#navbar li {
float:left;
}

#navbar li a {
display:block;
padding:3px 10px;
margin:0;
border-right:1px solid #ffffff;
font-family:Helvetica,Arial,sans-serif;
font-size:15px;
line-height:15px;
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
font-weight:normal;
}

#navbar li a:hover {
background:#cc0000;
}

#navbar img {
border:0;
}

#highlightsbar {
padding:0;
margin:3px 0 0 20px;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
line-height:12px;
color:#666666;
text-decoration:none;
}

#highlightsbar .title {
text-transform:uppercase;
float:left;
font-weight:bold;
}

#highlightsbar .textwidget {
float:left;
padding:0;
margin:0 0 0 5px;
}

.clearer {
clear:both;
}

#submenu {
background:url('../images/submenushadow.png') left bottom repeat-x;
margin:30px 0 0 -10px;
padding:0 0 50px 0;
z-index:5000;
position:relative;
width:950px;
display:block;
}

#submenu-inner {
background:#ffffff;
border-left:5px solid #be023a;
border-bottom:5px solid #be023a;
border-right:5px solid #be023a;
padding:20px;
}

#submenu-inner .right {
float:left;
width:140px;
padding:0;
margin:0;
}

#submenu-inner .left {
float:left;
width:140px;
padding:0;
margin:0;
}

JavaScript:

<script type="text/javascript" language="javascript">
function toggle(id)
{
	el = document.getElementById(id);
	var display = el.style.display ? '' : 'none';
	el.style.display = display;
}
window.onload=function()
{document.getElementById('submenu').style.display='none';}

</script>