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 Coder
    Join Date
    Mar 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Exclamation Problem - was suggested I post here

    SOLVED! Thank you so much to TOMWS for giving me the most simple of solutions.....take out the overflow:hidden.

    It worked!!!!

    Thank you thank you thank you!!!!







    This was the suggestion I received :

    "If you don't get help here, you might try requesting a mod to move this up to the parent Javascript forum, or posting the question there afresh. It deals with a framework, sure, but it's not necessarily a framework-specific question, I think. I mention that because this subforum is lower traffic that the parent."


    The problem I'm having is this:

    Our nav menu was created (not by me, I'm trying to fix it) to originally have the menu button drop and expose the submenu.

    My employer no longer likes that and wants the menu button to stay in the navbar and have the submenu drop out of it instead.

    I was able to rearrange the div tags so that the menu button appeared on top of the drop down and the sub-menu rolls out under that....but this only works in IE...not FF/Safari. Here is the page where you can see one nav button that has the change applied to it and one that does not. (The first button has it - does not work in FF but works in IE...the third button is still set up the old way and works in both FF and IE) http://swdirect.com/jmiller/marketin...cruitment.html

    Can someone please look at this coding and tell me what to do in order to get it to work the same in all 3 browsers?

    Code at the top of the page...


    Code:
      <link href="css/global.css" rel="stylesheet" type="text/css" media="all" />
         <script src="js/jquery-1.2.1.pack.js" type="text/javascript"></script>
        <script src="js/globalSettings.js" type="text/javascript"></script>
    	<script src="js/backgroundposition.js" type="text/javascript"></script>
    	<script type="text/javascript">
        	$(document).ready(function(){	
    			$("#marketing_container").hover(
    			  function () {
    				$("#marketing_dropdown").slideDown(slideDownSpeed);
    			  }, 
    			  function () {
    				$("#marketing_dropdown").slideUp(slideUpSpeed);
    			  }
    			);
    			$("#services_container").hover(
    			  function () {
    				$("#services_dropdown").slideDown(slideDownSpeed);
    			  }, 
    			  function () {
    				$("#services_dropdown").slideUp(slideDownSpeed);
    			  }
    			);
    	
    		
        }); 
        
    	
        </script>


    Coding for nav....



    Code:
    <!-- Begin Nav-->
            	  	  <div id="nav">
                      
                        <div id="marketing_container">	
                         <div id="marketing_button"><a href="marketing_solutions.html" target="_self" title="Marketing Solutions"></a></div>
                          <div id="marketing_dropdown">
                            	
                                <ul>
                                	<li><a href="marketing_student_recruitment.html" target="_self" title="Student Recruitment Marketing">Student Recruitment</a></li>
                                    <li><a href="marketing_non_profit_marketing.html" target="_self" title="Non-Profit">Non-Profit</a></li>
                                    <li><a href="marketing_insurance_marketing.html" target="_self" title="Insurance Marketing">Insurance Marketing</a></li>
                                    <li><a href="marketing_solutions.html" target="_self" title="Commercial">Commercial</a></li>
                                </ul>  
                            </div>
                          
                        </div>
                        <div id="billing_container">
                       	  <div id="billing_button"><a href="billing_statements.html" target="_self" title="Billing Statements"></a></div>
                        </div>
                      <div id="services_container">
                        	<div id="services_dropdown">
                            	<ul>
                                	<li><a href="services_marketing.html" target="_self" title="Marketing Services">Marketing</a></li>
                                    <li><a href="services_billing.html" target="_self" title="Billing Services">Billing</a></li>
                                </ul>    
                            </div>
                            <div id="services_button"><a href="services_marketing.html" target="_self" title="Services"></a></div>
                        
                        </div>
                     
                        
                        <div id="contact_container">
                        	
                            <div id="contact_button"><a href="contact_us.html" target="_self" title="Contact Us"></a></div>
                        
                        </div>
                        <div id="client_container">
                        	<div id="client_button"><a href="index.html" target="_self" title="Home"></a></div>
                        </div>
              	<!-- End Navigation -->
              </div>



    and finally, nav styling in css



    Code:
    #nav {
    	position: relative;
    	width: 830px;
    	margin: auto;
    	}
    	
    	#client_button {
    		position: relative;
    		float: left;
    		background-image: url(../exportmedia/client_login_button.gif);
    		background-repeat:no-repeat;
    		width: 163px;
    		height: 29px;
    	}
    	#billing_button {
    		position: relative;
    		float: left;
    		background-image: url(../exportmedia/billing_button.gif);
    		background-repeat:no-repeat;
    		width: 164px;
    		height: 29px;
    	}
    	#marketing_button {
    		position: relative;
    		float: left;
    		background-image: url(../exportmedia/marketing_button.gif);
    		background-repeat:no-repeat;
    		width: 162px;
    		height: 29px;
    	}
    	#services_button {
    		position: relative;
    		float: left;
    		background-image: url(../exportmedia/services_button.gif);
    		background-repeat:no-repeat;
    		width: 163px;
    		height: 29px;
    	}
    	#contact_button {
    		position: relative;
    		float: left;
    		background-image: url(../exportmedia/contact_us_button.gif);
    		background-repeat:no-repeat;
    		width: 164px;
    		height: 29px;
    	}
    	
    	#client_button a {
    		width: 100%;
    		height: 100%;
    		display: block;
    	}
    	#billing_button a {
    		width: 100%;
    		height: 100%;
    		display: block;
    	}
    	#marketing_button a{
    		width: 100%;
    		height: 100%;
    		display: block;
    	}
    	#services_button a{
    		width: 100%;
    		height: 100%;
    		display: block;
    	}
    	#contact_button a{
    		width: 100%;
    		height: 100%;
    		display: block;
    		
    	}
    	
    	#client_container {
    		position: relative;
    		float:left;
    		width: 163px;
    		height: 68px;
    		z-index: 1;
    	}
    		
    	#billing_container {
    		position: relative;
    		float:left;
    		width: 164px;
    		height: 68px;
    		z-index: 1;
    	}
    		
    	#marketing_container {
    		position: relative;
    		float:left;
    		width: 162px;
    		height: 100px;
    		z-index: 1;
    	}
    		
    	#services_container {
    		position: relative;
    		float:left;
    		width: 163px;
    		height: 70px;
    		z-index: 1;
    	}
    		
    	#contact_container {
    		position: relative;
    		float:left;
    		width: 164px;
    		height: 70px;
    		z-index: 1;
    	}
    	
    																/* DROP DOWN STYLING */
    	#services_dropdown,
    	#contact_dropdown{
    		display: none;
    		height:60px;
    		overflow: hidden;
    	
    	}
    	
    	#marketing_dropdown {
    		display: none;
    		height:100px;	
    		overflow: hidden;
    		z-index: 1;
    	}
    	
    	#services_dropdown li,
    	#contact_dropdown li,
    	#marketing_dropdown li{
    		list-style-type: none;
    		padding: 0;
    		margin-bottom: 5px;
    		margin-left: 8px;
    		color: white;
    		font-family:Arial, sans-serif;
    		list-style-type: none;
    		z-index: 1;
    		
    			
    	}
    	#services_dropdown ul li a,
    	#contact_dropdown ul li a,
    	#marketing_dropdown ul li a,{
    		text-decoration: none;
    		color: black;
    		font-family: Arial, sans-serif;
    		font-size: 12px;
    		font-weight:600;
    			
    	}
    	/*#services_dropdown li a:hover,
    	#contact_dropdown li a:hover,
    	#marketing_dropdown li a:hover{
    		text-decoration: none;
    		color: white;
    		font-family: Arial, sans-serif;
    		font-size: 12px;
    		font-weight:600;
    		
    			
    	} */
    	
    	
    	#services_dropdown ul,
    	#contact_dropdown ul,
    	#marketing_dropdown ul{
    		width: 160px;
    		list-style-type: none;
    		padding: 0;
    		margin: 0;
    		background-color:#F90;
    		height: 110px;
    		
    		
    	}
    	
    															/* END DROP DOWN STYLING */
    	/*END STYLING FOR NAVIGATION */



    Can anyone help me out with this?

    Thank you all very much in advance for your help.
    Last edited by ladyorelinde; 06-23-2009 at 05:20 PM. Reason: Solved


 

Posting Permissions

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