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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts

    Drop Down menu not working in IE - padding problem ??

    hey, so this is from a past post that didnt get resolved.
    I have a drop down menu working.
    And it works great in all browsers, except for safari.

    As you can see in the picture, the drop down is messing up and it seems like the ul li is not getting a width or something.

    here is the html

    Code:
    <div id="nav" class="container"> 
      <ul class="dropdown"> 
        <li><a class="dir">Services</a> 
          <ul> 
            <li><a href="http://www.ckgtools.com/index.php/CKGInternational/Coaching-and-Mentoring">Coaching / Mentoring</a></li> 
            <li><a href="http://www.ckgtools.com/index.php/CKGInternational/Kens-Topics">Keynote Speaking & Workshops</a></li> 
            <li><a href="http://www.ckgtools.com/index.php/CKGInternational/Marketing-Services">Marketing Services</a></li> 
          </ul> 
        </li> 
        <li><a class="dir">Workshops & Seminars</a> 
          <ul> 
            <li><a href="http://www.ckgtools.com/index.php/CKGInternational/Teleconference-Series">Teleconference Series</a></li> 
            <li><a href="http://www.ckgtools.com/index.php/CKGInternational/Mastery-Summit">Seminars</a></li> 
          </ul> 
        </li> 
        <li><a class="dir">Videos</a> 
          <ul> 
            <li><a href="http://www.ckgtools.com/index.php/CKGInternational/The-Bottom-Line">The Bottom Line</a></li> 
            <li><a href="http://www.ckgtools.com/index.php/CKGInternational/Live-Streams">Live Streams</a></li> 
          </ul> 
        </li> 
        <li><a class="dir">Discuss & Grow</a> 
          <ul> 
            <li><a href="blog.ckginternational.com">Coach Kens Blog</a></li> 
          </ul> 
        </li> 
        <li><a class="dir">Free Resources</a> 
          <ul> 
            <li><a href="http://www.ckgtools.com/index.php/CKGInternational/Newsletter">Newsletter</a></li> 
            <li><a href="blog.ckginternational.com">Coach Kens Blog</a></li> 
            <li><a href="http://www.ckgtools.com/index.php/CKGInternational/Billionaire-Mindset">Billionaire Mindset</a></li> 
          </ul> 
        </li> 
        <li><a class="dir">Testimonials</a> 
          <ul> 
            <li><a href="http://www.ckgtools.com/index.php/CKGInternational/What-Clients-Are-Saying">What Clients Are Saying</a></li> 
            <li><a href="http://www.ckgtools.com/index.php/CKGInternational/Success-Stories">Success Stories</a></li> 
          </ul> 
        </li> 
        <li><a href="https://ckg.infusionsoft.com/cart/store.jsp" class="dir">Store</a> </li> 
        <li><a class="dir">About Us</a> 
          <ul> 
            <li><a href="http://www.ckgtools.com/index.php/CKGInternational/Company-Profile">Company Profile</a></li> 
            <li><a href="http://www.ckgtools.com/index.php/CKGInternational/Coach-Ken">About Coach Ken</a></li> 
            <li><a href="http://www.ckgtools.com/index.php/CKGInternational/Coaching-Team">Our Coaching Team</a></li> 
          </ul> 
        </li> 
        <li><a href="http://www.ckgtools.com/index.php/CKGInternational/Contact-Us" class="dir">Contact Us</a> </li> 
      </ul> 
    </div>
    And here is the css

    Code:
    <!--
    @charset "UTF-8";
    
    /**
     * Horizontal CSS Drop-Down Menu Module
     *
     * @file		dropdown.css
     * @package		Dropdown
     * @version		0.7.1
     * @type		Transitional
     * @stacks		597-599
     * @browsers	Windows: IE6+, Opera7+, Firefox1+
     *				Mac OS: Safari2+, Firefox2+
     *
     * @link		http://www.lwis.net/
     * @copyright	2006-2008 Live Web Institute. All Rights Reserved.
     *
     */
    
    ul.dropdown,
    ul.dropdown li,
    ul.dropdown ul {
     list-style: none;
     margin: 0;
     padding: 0;
    }
    
    ul.dropdown {
     position: relative;
     z-index: 597;
     width:960px;
     margin:0 auto;
     padding-left:65px;
    }
    
    ul.dropdown li {
     float: left;
     line-height: 1.3em;
     vertical-align: middle;
     zoom: 1;
    font-family:Arial, Helvetica, sans-serif; font-size:12px; 
     
    }
    
    ul.dropdown li.hover,
    ul.dropdown li:hover {
     position: relative;
     z-index: 1;
     cursor: default; 
    }
    
    ul.dropdown ul {
     visibility: hidden;
     position: absolute;
     top: 100%;
     left: 0;
     z-index: 598;
     width:175px;
    }
    
    ul.dropdown ul li {
     float:none;
    
    }
    
    ul.dropdown ul ul {
     top: 1px;
     left: 99%;
     width:156px;
    
    }
    
    ul.dropdown li:hover > ul {
     visibility: visible; 
    }
    
    @charset "UTF-8";
    
    /** 
     * NVIDIA Advanced CSS Drop-Down Menu Theme
     *
     * @file		default.advanced.css
     * @name		NVIDIA
     * @version		0.1
     * @type		transitional
     * @browsers	Windows: IE5+, Opera7+, Firefox1+
     *				Mac OS: Safari2+, Firefox2+
     *
     * @link		http://www.lwis.net/
     * @copyright	2008 Live Web Institute. All Rights Reserved.
     *
     */
    
    @import "default.css";
    
    
    ul.dropdown li a {
     display: block;
     color:#000;
    padding-top:12px;
    padding-right:7px;
    padding-left:7px;
    padding-bottom:10px;
    
    }
    
    
    /* ------------- Override default */
    
    	ul.dropdown li { padding-right:19px;
    	}
    
    
    /* ------------- Reinitiate default: post-override activities  */
    
    	ul.dropdown li.dir {
    	 padding: 7px 20px 7px 14px; 
    	}
    
    	ul.dropdown ul li.dir {
    	 
    	}
    
    
    /* ------------- Custom */
    
    	ul.dropdown li {  background-color:#c3b59b; 
    
    	}
    
    	ul.dropdown li ul a {
    	 padding: 4px 5px 4px 14px;
    	 width: 156px; /* Especially for IE */
    	 background-color:#899590;
    	}
    
    	ul.dropdown li ul a:hover {
    	 background-color: #899590;
    	 color:#fff;
    	 width:156px;
    	}
    
    	ul.dropdown a.open {
    	 background-color: #899590;
    	 color: #fff;
    	width:156px;
    	}
    
    	ul.dropdown ul a.open {
    	 background-color: #899590;
    	 color: #fff;
    	width:156px;
    	}
    
    
    	/* CSS 2.1 */
    
    	ul.dropdown li:hover > a.dir {
    	 background-color: #899590;
    	 color: #fff;
    	}
    
    	ul.dropdown ul li:hover > a.dir {
    	 background-color: #899590;
    	 color: #fff;
    	}
    -->
    Any help would be greatly appreciated, i feel like iv tried everything but with no success.
    Attached Thumbnails Attached Thumbnails Drop Down menu not working in IE - padding problem ??-problem.jpg  

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    Update.
    Seems like i got the dropdown to work.
    But the position is still off.
    In safari, it is aligned to the top, and does not have the same padding inbetween each LI as all the other browsers


  •  

    Posting Permissions

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