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 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Problem with nav bar

    The problem I'm having is this:

    The 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.

    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 here's the 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? I don't' know if hyperlinks are allowed in this forum but I don't want my posting removed because of it, but if you need to see how the menu operates in order to understand what I'm talking about, please contact me and I will send you the link.

    Thank you all very much in advance for your help.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I don't' know if hyperlinks are allowed in this forum but I don't want my posting removed because of it, but if you need to see how the menu operates in order to understand what I'm talking about, please contact me and I will send you the link.
    You can freely post your link here, which will help us a lot to help you.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Here it is

    I haven't tried changing the nav bar on all the pages yet, I don't want to until I know it's working correctly. But, here is the page that I HAVE made the change on::

    http://swdirect.com/jmiller/marketin...cruitment.html

    When you view this in FF, you can see that the first button in the nav bar (Marketing Solutions) does nothing....the third button (Services) shows what the menu WAS doing...

    When you view this same page in IE...the first button (Marketing Solutions) works the way I want it to....the sub menu drops. The third button (Services) is still set up the old way.

    But this is a clear example of how it was, how I'd like it, and how it's not working the same in both browsers.

    Thank you very much.

  • #4
    New Coder
    Join Date
    Mar 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Does anyone have any suggestions for how I can correct this?

    Thanks


  •  

    Posting Permissions

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