Show/hide div problems in IE7 only

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 开发者_StackOverflow中文版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>

If you pull it out and it works then it must be something in the surrounding code.

The most common issue with non javascript IE compatibility is IE will treat extra open tags and close tags differently than other browsers.

I suggest you look very closely at the html, or selectively add back HTML till you can reproduce.

I suggest you look into using conditional-includes for IE7 (forget about IE6 if at all possible). Here's a jsFiddle of the code I got working in my copy of IE7: http://jsfiddle.net/qjx4g/2/

What happened is that you shouldn't have your submenu code within your #navbar <ul> (i.e., close your #navbar (</ul>) and then put in your submenu's code) and whenever I have problems with a container with position: relative that contains content that is floated, I change the container to use position: absolute and work from there (only in a conditional-include for IE7).

1 - If you give your ul a width of 100%, it solves the problem of the last list item "About" pushing itself down to a second line.

2 - Close your ul . In IE9 the div#submenu is a child of ul, while in IE7 it is the child of the last li

3 - div#navbar{ position: relative;} - div#submenu{position: absolute; top: 15px; right: 1px;} - Works on IE7

pic

Here's the solution I came up with.

Firstly, I created an extra div for the submenu - called #submenu-outer:

#submenu-outer {
position:absolute;
width:100%;
left:0;
display:block;
text-align:center;
margin:35px 0 0 0;
z-index:5000;
}

Then I made #submenu appear in the centre of the 100% outer div:

#submenu {
background:url('totalbackpacker.co.uk/wp-content/themes/totalbackpacker/images/…;) left bottom repeat-x;
margin-left:auto;
margin-right:auto;
padding:0 0 50px 0;
width:950px; 
text-align:left;
}

Et voila! Thanks to everyone who helped along the way! :)