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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    IE 6 Messing up CSS Pull Down Menus!

    I got this script off of another website, implemented it into my own, and got it looking very nice in every browser EXCEPT, as expected, IE 6...

    What it should look like:


    What it looks like in IE 6:


    The relevant code:
    Code:
    <style type="text/css">
    #sddm
    {	margin: 0;
    	padding: 0;
    	position: relative; 
    	z-index: 1000;}
    
    #sddm li
    {	margin: 0;
    	padding: 0;
    	list-style: none;
    	float: left;
    	font: bold 12px arial}
    
    #sddm li a
    {	display: block;
    	margin: 0 1px 0 0;
    	padding: 4px 10px;
    	width: 60px;
    	
    	color: #FFF;
    	text-align: center;
    	text-decoration: none}
    
    #sddm li a:hover
    {	background: #49A3FF}
    
    #sddm div
    {	position: absolute;
    	visibility: hidden;
    	margin: 0;
    	padding: 0;
    	background: #EAEBD8;
    	border: 1px solid #5970B2}
    
    	#sddm div a
    	{	position: relative;
    		display: block;
    		margin: 0;
    		padding: 5px 10px;
    		width: auto;
    		white-space: nowrap;
    		text-align: left;
    		text-decoration: none;
    		background: #EAEBD8;
    		color: #2875DE;
    		font: 11px arial}
    
    	#sddm div a:hover
    	{	background: #49A3FF;
    		color: #FFF}
    </style>
    <script type="text/javascript">
    var timeout	= 500;
    var closetimer	= 0;
    var ddmenuitem	= 0;
    
    // open hidden layer
    function mopen(id)
    {	
    	// cancel close timer
    	mcancelclosetime();
    
    	// close old layer
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    
    	// get new layer and show it
    	ddmenuitem = document.getElementById(id);
    	ddmenuitem.style.visibility = 'visible';
    
    }
    // close showed layer
    function mclose()
    {
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    }
    
    // go close timer
    function mclosetime()
    {
    	closetimer = window.setTimeout(mclose, timeout);
    }
    
    // cancel close timer
    function mcancelclosetime()
    {
    	if(closetimer)
    	{
    		window.clearTimeout(closetimer);
    		closetimer = null;
    	}
    }
    
    // close layer when click-out
    document.onclick = mclose; 
    </script>
    * * <table>
    * <tr>
    * <td bgcolor="#333333">
    * * <!-- Begin top menu -->
    * * 
    * * <ul id="sddm">
    * * <li><a href="#" 
    * * * * onmouseover="mopen('m1')" 
    * * * * onmouseout="mclosetime()">Home</a>
    * * * * <div id="m1" 
    * * * * * * onmouseover="mcancelclosetime()" 
    * * * * * * onmouseout="mclosetime()">
    * * * * <a href="#">HTML Drop Down</a>
    * * * * <a href="#">DHTML Menu</a>
    * * * * <a href="#">JavaScript DropDown</a>
    * * * * <a href="#">Cascading Menu</a>
    * * * * <a href="#">CSS Horizontal Menu</a>* * * * </div>
    * * </li>
    * * <li><a href="#" 
    * * * * onmouseover="mopen('m2')" 
    * * * * onmouseout="mclosetime()">Download</a>
    * * * * <div id="m2" 
    * * * * * * onmouseover="mcancelclosetime()" 
    * * * * * * onmouseout="mclosetime()">
    * * * * <a href="#">ASP Dropdown</a>
    * * * * <a href="#">Pulldown menu</a>
    * * * * <a href="#">AJAX Drop Submenu</a>
    * * * * <a href="#">DIV Cascading Menu</a>* * * * </div>
    * * </li>
    * * <li><a href="#">Order</a></li>
    * * <li><a href="#">Help</a></li>
    * * <li><a href="#">Contact</a></li>
    </ul>
    <div style="clear:both"></div>
    
    * * * * <!-- End top menu -->

  • #2
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Change

    Code:
    #sddm
    {	margin: 0;
    	padding: 0;
    	position: relative; 
    	z-index: 1000;}
    to

    Code:
    #sddm
    {	margin: 0;
    	padding: 0;
    	position: fixed; 
    	z-index: 1000;}

  • Users who have thanked GardenGnome2 for this post:

    toxicity3440 (11-25-2008)

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks that worked great!!

    but now i got another problem...

    in all browsers EXCEPT IE 6 all of the pull down menus have been moved downward to exactly where the first link on the menus previously started.

    sense that probably didn't make alot of sense here is a picture of the working one:


    and a picture of the broken one:

  • #4
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Try setting position for #sddm li a. I don't have your whole code so I can't exactly tell you what to do. Maybe set two different divs.

    Can I have a site link?
    Last edited by GardenGnome2; 11-25-2008 at 03:35 AM.

  • #5
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    solved! i just used some IE mark out tags to make it use one css template if you're using IE 6 and another if you're not. it may not be the best and more reliable way but it certainly works!

    thanks for all your help!

  • #6
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help Please

    I am having the same problem, how did you fix it? Please explain.

  • #7
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    never mind, I got it.


  •  

    Posting Permissions

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