Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show/hide div problems in IE7 only

    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:

    Code:
    <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:

    Code:
    #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:

    Code:
    <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>
    Last edited by martinj86; 06-06-2011 at 04:15 PM.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •