...

View Full Version : Drop Down menu not working in IE - padding problem ??



aaronhockey_09
04-25-2011, 04:22 PM
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


<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


<!--
@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.

aaronhockey_09
04-25-2011, 05:19 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum