Results 1 to 4 of 4

Thread: Google Chrome Menu Drop down aligns to left

  1. #1
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry Google Chrome Menu Drop down aligns to left

    Folks,

    I am working on a page and I am almost done with it however my dropdown menu works perfectly fine in IE however, it aligns to left in google chrome and Safari. Tried various google methods like margin: 0px aouto; etc none of it seems to be working. Help

    My CSS file as follows.
    Code:
    #nav 
    {
    	
    	margin: 0px auto;
    	padding: 0px;
    	list-style-type: none;
    	list-style-image: none;
    }
    
    	#nav li 
    	{
    		
    		margin: 0px auto;
    		padding: 0px;
    		float: left;
    	}
    	
    	#navTab01, 
    	#navTab02, 
    	#navTab03, 
    	#navTab04, 
    	#navTab05,
    	#navTab06,
    	#navTab07,
    	/*#navTab08*/
    	{
    		position: relative;
    		float: left;
    	}
    		
    		a.mainNavItem, 
    		a.mainNavItem:active, 
    		a.mainNavItem:visited 
    		{
    			float: left;
    			padding: 0;
    			height: 49px;
    			background-image: url(../images/structure/mainNav.jpg);
    			text-indent: -9999px;
    			font-size: 1%;
    			overflow: hidden;
    		}
    		
    		#navTab01 a.mainNavItem { width: 112px; background-position: 0px 0px; }
    		#navTab02 a.mainNavItem { width: 125px; background-position: -112px 0px; }
    		#navTab03 a.mainNavItem { width: 120px; background-position: -237px 0px; }
    		#navTab04 a.mainNavItem { width: 131px; background-position: -357px 0px; }
    		#navTab05 a.mainNavItem { width: 120px; background-position: -488px 0px; }
    		#navTab06 a.mainNavItem { width: 111px; background-position: -608px 0px; }
    		#navTab07 a.mainNavItem { width: 154px; background-position: -719px 0px; }
    		/*#navTab08 a.mainNavItem { width: 107px; background-position: -873px 0px; }*/
    		
    		#navTab01 a.mainNavItem:hover { background-position: 0px -49px; }
    		#navTab02 a.mainNavItem:hover { background-position: -112px -49px; }
    		#navTab03 a.mainNavItem:hover { background-position: -237px -49px; }
    		#navTab04 a.mainNavItem:hover { background-position: -357px -49px; }
    		#navTab05 a.mainNavItem:hover { background-position: -488px -49px; }
    		#navTab06 a.mainNavItem:hover { background-position: -608px -49px; }
    		#navTab07 a.mainNavItem:hover { background-position: -719px -49px; }
    		/*#navTab08 a.mainNavItem:hover { background-position: -873px -49px; }*/
    		
    		#navTab01 a.current { background-position: 0px -49px; }
    		#navTab02 a.current { background-position: -112px -49px; }
    		#navTab03 a.current { background-position: -237px -49px; }
    		#navTab04 a.current { background-position: -357px -49px; }
    		#navTab05 a.current { background-position: -488px -49px; }
    		#navTab06 a.current { background-position: -608px -49px; }
    		#navTab07 a.current { background-position: -719px -49px; }
    		/*#navTab08 a.current { background-position: -873px -49px; }*/
    
    
    /* ========== Drop-down (Level 2) Navigation ========== */
    
    			#mainNav ul.dropdown
    			{
    				display: none;
    				position: absolute;
    		    margin: 0;
    				padding: 0;
    				width: 196px;
    				left: 0px;
    				top: 49px; /* Height of main navigation item */
    				list-style-image: none;
    				list-style-type: none;
    				border-left: solid 1px #A1A1A1;
    				border-right: solid 1px #A1A1A1;
    				z-index: 1000;
    			}
    			
    			#mainNav ul.lastMainNavDropdown 
    			{
    				left: auto; /* Required for 'right' to work */
    				right: 0px;
    				border-left: solid 1px #A1A1A1;
    				border-right: solid 1px #A1A1A1;
    			}
    				
    				#mainNav ul.dropdown li 
    				{
    					position: relative;
    					background-color: #FFF;
    					border-bottom: solid 1px #5E5E5E;
    				}
    						
    					#mainNav ul.dropdown li a, 
    					#mainNav ul.dropdown li a:active, 
    					#mainNav ul.dropdown li a:visited 
    					{
    						display: block;
    						padding: 10px 8px 10px 8px;
    						width: 180px;				
    						background-color: #434343;
    						font-family: Arial, Helvetica, sans-serif;
    						font-size: 12px;
    						text-decoration: none;
    						color: #FFF;
    						cursor: pointer;	
    					}
    							
    					#mainNav ul.dropdown li a:hover 
    					{
    						background-color: #626262;
    						background-color: #545454;
    						color: #FFF;
    					}
    my HTML code

    Code:
    	<ul id="mainNav">
    	<ul id="nav"><li id="navTab01"><a title="Company" href="Company_overview.html" class="mainNavItem">Company</a><ul class="dropdown"><li style="z-index: -1;"><a title="Company Overview" href="Company_overview.html" class="">Company Overview</a></li></ul></li>
    		<li id="navTab02"><a title="Expertise" href="Expertise_storage.html" class="mainNavItem">Expertise</a><ul class="dropdown"><li style="z-index: -1;"><a title="Cloud Computing " href="Expertise_cloudcomputing.html" class="">Cloud Computing </a></li><li style="z-index: -2;"><a title="Database" href="Expertise_database.html" class="">Database</a></li><li style="z-index: -3;"><a title="Storage" href="Expertise_storage.html" class="">Storage</a></li><li style="z-index: -4;"><a title="Virtualization" href="Expertise_virtualization.html" class="">Virtualization</a></li><li style="z-index: -5;" class="last"><a title="Application Integration" href="Expertise_appsintegration.html" class="">Application Integration</a></li></ul></li>
    		<li id="navTab03"><a title="Consulting" href="Consulting_techoptimz.html" class="mainNavItem">Consulting</a><ul class="dropdown"><li style="z-index: -1;"><a title="Technology Optimization" href="Consulting_techoptimz.html" class="">Technology Optimization</a><li style="z-index: -2;"><a title="Strategic Sourcing" href="Consulting_sourcing.html" class="">Strategic Sourcing</a></li><li style="z-index: -3;"><a title="Education &amp; Development" href="Consulting_edutrain.html" class="">Education &amp; Development</a></li></ul></li>
    			<li id="navTab04"><a title="Resources" href="dm_Resources.html" class="mainNavItem">Resources</a><ul class="dropdown"><li style="z-index: -1;"><a title="Resources Overview" href="dm_Resources.html" class="">Resources Overview</a></li></ul></li>
    			<li id="navTab05"><a title="Partners" href="dm_partners.html" class="mainNavItem">Partners</a><ul class="dropdown"><li style="z-index: -1;"><a title="Partners" href="dm_partners.html" class="">Partners Overview</a></li></ul></li>
    			<li id="navTab06"><a title="Careers" href="dm_careers.html" class="mainNavItem">Careers</a><ul class="dropdown"><li style="z-index: -1;"><a title="Join the Datamach Team" href="dm_careers.html" class="last">Join the Datamach Team</a></li></ul></li>
    			<li id="navTab07"><a title="Contact Us" href="dm_contacts.html" class="mainNavItem">Contact Us</a><ul class="dropdown"><li style="z-index: -1;"><a title="Contact Us" href="dm_contacts.html" class="">Contact Us</a></ul></li></li></ul>
    
    	</ul>
    PLEase help

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Hi shunya,please post a link to the page you are having issues with.
    Thanks,

    Bud

  3. #3
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,998
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    12

    Default

    What exactly are you deeming to be correct behaviour? Please clearly explain what you would like to happen.

    It appears that you do not have a valid DOCTYPE - address that and that should help to standardise the behaviour across different browsers.

    Also, you link to a jQuery library but i don't see any other kind of JavaScript - should there be an additional menu plugin or in-page menu initialisation script that you have forgotten to include? If not, why include the library if you're not using it?

    If this is a CSS only menu, have you followed an online tutorial or grabbed the CSS from another website? If you have, please provide the link as there may be something that you've overlooked.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Error fetching Ajax content on Google Chrome with Drop-in box script
    By baumann06 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 12-13-2012, 10:09 PM
  2. Form Drop down not working in Google Chrome
    By samlivingston129 in forum HTML
    Replies: 6
    Last Post: 08-19-2012, 09:05 PM
  3. Replies: 1
    Last Post: 05-19-2010, 09:48 PM
  4. Chrome CSS Drop Down - left justifed dropdown menus?
    By dollfaceod in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 02-19-2009, 12:41 AM
  5. Google Search in Chrome Drop Down Navigation Menu
    By Nacho in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-07-2006, 06:53 PM

Bookmarks

Posting Permissions

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