?
Solved

how to center horizontal nav bar and make my dropdown menu stay open (stickyness)

Posted on 2009-06-27
6
Medium Priority
?
2,047 Views
Last Modified: 2012-05-07
I am having trouble centering a horizontal css navigation bar.  I tried to wrap it in a .table with margin set to 0 and auto, I tried applying text-align to the li's, but it didn't work.
Also, the dropdown won't stay down in ie7 and Firefox, although I have success in ie6 (it appears to struggle a bit in ie6, but maybe that is my old touchpad! - I actually seemed to make it work in ie6 by reducing the top padding of the dropdown so my "hotspot" was "closer" - thought that would work in ie7 and Firefox, but to no avail. The site uses server side includes to work (my navigation is included on a txt page).  My practice page is at www.helpingservices.org/PRACTICE.html (I included below my css code - please excuse my notes in progress....)
/* Navbar division */
 #navbar{
	/* Set to any width */
    /* border:dashed 1px red; */ 
         /* Use any background color/image you like */
          background-image:url(Buttons/button_gradient_nav.jpg) repeat-x;
	/* Use any fonts you like */
         font-family: Verdana, Geneva, Arial, Helvitica, Sans-Serif;
	/* Same as simple navbar, but smaller font size here */
         font-size:80%;
	color:#fff; /* white */
	/* Use any height you like, but match to link height */
         height:1.5em;
	margin-left:0px; /* WAS 10 PX- REMOVED BECAUSE IT CREATED WHITE SPACE */
	background-color: #000000;
	text-align:center; /*added to center contents of navbar, will then apply to child ul margin-left and margin right to center */
    }
    
    /* Remove bullets from unordered list */
    #navbar ul{
        list-style-type:none;	
		 background-image:url("Buttons/button_gradient_nav.jpg");	
		/* padding-left:3em;
		padding-right:3em; /* ORIGINALLY COMMENTED OUT THE PADDING, BECAUSE IT SCREWS UP THE DROPDOWNS ALIGNING WITH THE PARENT NAVIGATION BUTTON */
    }
    
   /* List items in the navbar */ 
#navbar li{ 
  float:left; 
  /* Required for drop-down menus */ 
  position:relative; 
} 
 
#navbar a,
#navbar a:link,
#navbar a:visited {
text-decoration:none;
font-family: Verdana, Geneva, Sans-Serif;
 background-image:url("Buttons/button_gradient_nav.jpg");
	background-repeat:repeat-x;
font-size:80%;
color:#fff;
display:block;
height:1.5em;
width:auto; _width:9.5em;/* WAS 6 EM, NOT ENOUGH FOR TEXT, MAKING IT AUTO ALLOWED THE LONGER LINKS TO FIT - 6/24/09 IE6 doesn't respond to auto */
  border-right: solid 1px #ddd; 
  line-height:1.5em; /* WAS 2EM, CHANGED TO 1.5EM */
  text-align:center; 
  outline-style:none; 
  padding-left:.5em;
  padding-right:.5em;
  }
 
/* Navbar hover, active, and current page links */ 
#navbar a:hover, 
#navbar a:active, 
#navbar li.selected a:link, 
#navbar li.selected a:visited{ 
  background:#ddd url("Buttons/button_gradient_nav.jpg"); repeat-x center; 
  color:#000; 
} 
 
/* Drop-down menu styles */ 
/* Applies to drop-down menus in navbar */ 
#navbar li ul{ 
  position:absolute; 
  z-index:100; 
  visibility:hidden; 
  line-height:1.5em;
} 
 
/* Make drop-down visible on navbar hover */ 
#navbar li:hover ul, 
#navbar li a:hover ul{ /* IE6 hack */ 
  visibility:visible; 
  top:1.4em; 
  left:0; 
} 
 
 
/* Applies to links on the drop-down menu */ 
#navbar li:hover ul li a, 
#navbar li a:hover ul li a{ /* IE6 hack */ 
  background:#ccc; /* Removes background image */ 
  color:#000; 
  text-align:left; 
  display:block; 
  width:10em; 
  padding:.1em 0 0 1em; /* padding more than .4em prevents the dropdown from "sticking down" and allowing the user to hover over and select from dropdown menu in IE6 */
  /* height:auto; */
} 
 
/* Hover on drop-down menu links */ 
#navbar li:hover ul li a:hover, 
#navbar li a:hover ul li a:hover{ /* IE6 hack */ 
  background: #aaa; 
  color:#000; 
} 
 
/* IE6 hack applies to its table drop-down */ 
#navbar table { 
margin:-1px;
  border-collapse:collapse; 
  position:absolute; 
 top:-.199em; /* WAS 0.5 BUT CHANGED TO O.1 BECAUSE THERE WAS A GAP FOR THE DROPDOWN MENU 6/24/09 */
  left:0; 
  z-index:100; 
  font-size:14px; /* font size has to be defined inside the table for IE6 hack, otherwise dropdown shrinks */
  }

Open in new window

0
Comment
Question by:SweetIowa
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 25

Accepted Solution

by:
Rouchie earned 375 total points
ID: 24727955
Hi

Because of the amount of code hacks in your example I would recommend abandoning your approach and using an already-proven method that works in all major browsers.  This way as IE updates to newer versions you won't continuously have to rehack the code.

The 'suckerfish' approach is the most widely recommended as it is standards compliant and requires hardly any coding to get working.  I use it in all my designs as it is vitually future-proof:  http://htmldog.com/articles/suckerfish/dropdowns/
0
 

Author Comment

by:SweetIowa
ID: 24728283
I've come across that solution frequently.  I was hoping to do a pure css solution... I thought I was so close!  I am going to investigate this and come back in a few hours - Renee
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 24728504
There is no pure CSS solution unfortunately because IE6 is so bad at CSS, and some people are even still using IE5
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:SweetIowa
ID: 24729138
...still trying to get this all to work.....Sweet Iowa
0
 

Author Comment

by:SweetIowa
ID: 24735229
Well, my Dreamweaver crashed, so I am sidetracked with that problem.  The sucker fish menu is working, but I had  a bit of a hangup with it with IE7.  It's working now, I just need to style it.  
0
 

Author Comment

by:SweetIowa
ID: 24735259
I should say it working on a DIFFERENT test page than what I have above - if you go there, it probably still looks like a problem!  -Sweet Iowa
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question