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 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2010
    Posts
    21
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Drop down menu protruding to side in IE 7 - Help please!

    Hello,
    I have a drop down menu that works fine on all browsers apart from IE7 (it works on IE 8.

    Problem in IE7:

    When you click the parent main list item the child sub-menu items in the list protrude to the side of the main list item instead of displaying blocking (pointing horizontally downwards).

    The HTML code is:
    <ul>
    <li class="mainItems">
    <a href="">What's new</a></li>


    <li class="mainItems">
    <a href="#" onclick="showHideSubMenu('sub1'); return false;">clothing</a>
    <ul class="submenu" id="sub1">
    <li><a href="../clothing/clothing_page1.html">clothing</a></li>
    </ul>
    </li>
    <li class="mainItems">
    <a href="#" onclick="showHideSubMenu('sub2'); return false;">Accessories</a>
    <ul class="submenu" id="sub2">
    <li><a class="subbie" href="../bags/bags_page1.html">bags</a></li>
    <li><a class="subbie" href="../jewellery/jewellery_page1.html">jewellery</a></li>
    </ul>
    </li>
    </ul>

    The CSS Code Is:

    ul{margin:0px;padding:0px;z-index:30;}

    li{
    list-style-type: none;
    width: 160px;
    float:left;
    font: 14px arial bold;
    text-transform:uppercase;
    padding:0px;
    margin-left:0px;
    }

    li a{
    display: block;
    padding:10px;
    width: 160px;
    height:35px;
    color: #ffffff;
    background-color:#808000;
    text-align: center;
    text-decoration:none;}



    .submenu{
    display: none;}

    .submenu{position: absolute;
    width:160px;
    margin: 0;
    padding: 0;
    background: #808000;}


    .submenu li a {
    display:block;
    padding:5px;
    width: 160px;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    background: #808000;
    color: #ffffff;
    font: 14px arial;
    text-transform:uppercase;}

    .mainItems:hover .submenu{
    display: block;
    color:#000000;}

    .submenu li a:hover {color:#000000;}

    The Javascript Code Is:

    <script type="text/javascript">
    function showHideSubMenu(elemID){
    var subMenuObj = document.getElementById(elemID);
    subMenuObj.style.display = (subMenuObj.style.display == 'block')? 'none' : 'block';
    }
    </script>

    Please can you help as I need the sub-menu list items to display block (point downwards) not protrude to the side, when the main item is clicked, on IE7.

    *Please note, the above code works fine on IE8, Safari, Opera, Chrome & Firefox

    Thanks,

    Nonye

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    403
    Thanks
    2
    Thanked 31 Times in 31 Posts
    IE7 uses a defective box model. You can do a lot of work trying to detect IE7 during load and then using scripting to try and fix it; or you can check your site stats to see if you have enough visitors using IE7 to access the site. Then after you discover that IE7 is irrelevant you can safely ignore how an obsolete browser renders.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • Users who have thanked COBOLdinosaur for this post:

    nonye (04-21-2013)

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Have a look at this tutorial. The -- simple -- techniques it covers produce guaranteed cross-browser menus, even down to IE6.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • Users who have thanked Frankie for this post:

    nonye (04-21-2013)

  • #4
    New Coder
    Join Date
    Feb 2010
    Posts
    21
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by COBOLdinosaur View Post
    IE7 uses a defective box model. You can do a lot of work trying to detect IE7 during load and then using scripting to try and fix it; or you can check your site stats to see if you have enough visitors using IE7 to access the site. Then after you discover that IE7 is irrelevant you can safely ignore how an obsolete browser renders.
    Thanks! Helpful comments plus it made me laugh

  • #5
    New Coder
    Join Date
    Feb 2010
    Posts
    21
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Frankie View Post
    Have a look at this tutorial. The -- simple -- techniques it covers produce guaranteed cross-browser menus, even down to IE6.
    Had a brief look at the webpage and it seems very useful. Will look again in more detail tomorrow. Thanks so much for providing the link


  •  

    Posting Permissions

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