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

    Exclamation Nav function not working

    I really need some help, please....................

    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 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? I dont' 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
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Quick FYI, you can post a link to the page. As a matter of fact, it's recommended so helpers can see what's actually happening and play around with it.
    Are you a Help Vampire?

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    Quick FYI, you can post a link to the page. As a matter of fact, it's recommended so helpers can see what's actually happening and play around with it.
    http://swdirect.com/jmiller/marketin...cruitment.html

    This is the page - if you are using FF - the first button doesn't work - but the 3rd button does (the 3rd button is how the drop down was set up prior to me rearranging it)

    If you are using IE - the first button DOES work....this is how it SHOULD look in both IE and FF....

    I can't figure it out. Please help.

  • #4
    New Coder
    Join Date
    Mar 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Anyone? Please....nobody on ANY forums that I've been posting to for weeks cares to respond.

    I don't know how to fix this and I don't know what is wrong. Isnt' there SOMEONE who knows what the glitch is??

  • #5
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    I played around with it in Firebug (if you don't have it, install it) and can't quite figure it out. The jquery animation is "working" because I can see the css properties changing in the code, but the div just won't appear.

    I did notice that the div does appear if I remove the overflow:hidden from #marketing_dropdown. However, the animation also doesn't work when I do that.

    I wonder if it's a z-index problem.
    Are you a Help Vampire?

  • #6
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Quote Originally Posted by ladyorelinde View Post
    Anyone? Please....nobody on ANY forums that I've been posting to for weeks cares to respond.

    I don't know how to fix this and I don't know what is wrong. Isnt' there SOMEONE who knows what the glitch is??
    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.
    Are you a Help Vampire?

  • Users who have thanked tomws for this post:

    ladyorelinde (06-23-2009)

  • #7
    New Coder
    Join Date
    Mar 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    What do you suggest I change the zindex too? I had to change the index of the main button or else it appeared below the sub menu...can't have that.

    If I can't get help here, where do you suggest I go and look for help? I'm at a complete loss and have asked everywhere I can think of with no luck (you're the only response I got that had any kind of information in it) at all.

    thanks for responding

  • #8
    New Coder
    Join Date
    Mar 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    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.
    Thank you very much, I appreciate the guidance. I will do that.


    To everyone else...please continue to post here if you can help me.

  • #9
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    I'm limited on what I can do since jquery changes things on load. Try removing the overflow:hidden from #marketing_dropdown and see if the animation works along with the div appearing.
    Are you a Help Vampire?

  • Users who have thanked tomws for this post:

    ladyorelinde (06-23-2009)

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

    It works!!!!!!!!!!!!!!! I have to tweak the sizing...........but it worked!!!

    I never would have guessed that...I think I've been staring at it too long!

    Thanks!

  • #11
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    That's one of the benefits of Firebug. No idea what's wrong? Just start removing stuff from the code and see what happens!
    Are you a Help Vampire?

  • Users who have thanked tomws for this post:

    ladyorelinde (06-23-2009)

  • #12
    New Coder
    Join Date
    Mar 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    While I actually finally have the attention of someone on here....can you also tell me why the font for the same sub-menu appears differently in FF than in IE? I'd like to get them looking the same, cause if you look in FF....the text expands out of the drop down box...and I'd like to avoid stretching the box,but make the fonts all consistent. They're both set to arial, so I dont' understand why one is short and fat and the other is tall and thin.....

    Thanks again for all of your help!

  • #13
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    You have a font-family set, but not a font-size. At least I don't see one in those elements or any of their parents. Default sizes may vary across browsers.
    Are you a Help Vampire?


  •  

    Posting Permissions

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