Center menu items in a CSS drop down menu

[irbk]

I've put together a pure CSS drop down menu for my site. It worked beautfully, until I found that if you had a large DPI setting, menu items started falling off and disappearing. So I rearranged the menu so there were fewer items on the main menu. Now at the larger DPI nothing falls off. Unfortunatly, now the menu, which is all left aligned, doesn't look as nice as it used too. I'm trying to figure out how to get all the top level menu items to appear centered. I've tried margin-left:auto; and margin-right:auto; just about everywhere and in just about evey combination I could think of but no matter what I try it doesn't seem to work. I'm hoping a new set of eyes on the code might be able to point out what I'm missing.
Here is the code

 div.Navigation {
	clear:both;
	margin-top: -10px;
	#margin-top:auto;
}
#nav {

	margin: 0;
	padding: 0;
	height: 22px;
	
	background-image:url(../Images/bar_solid_purple-slice.png);
	background-repeat:repeat;
}
#nav ul {
	margin:0;
	padding:0;
}
#nav li {
	list-style:none;
	float:left;
}
#nav li a {
	display:block;
	width: 7em; 
	background-image:url(../Images/bar_solid_purple-slice.png);
	background-repeat:repeat;
	color:#fff;
	text-decoration:none;
	text-align:center;
}
#nav li a:hover {
	background-image:url(../Images/Nav_bar_slice_over.png);
	background-repeat:repeat;
}
#nav li ul {
	display:none;
	width:100px;
	background-color: #23473d;
	margin-left:25px;
}
#nav li ul a {
	width:120px;
	padding-top:3px;
	padding-right:0px;
	padding-bottom:3px;
	padding-left:8px;
	
	text-align:left;
	font-size:smaller;
}
#nav li ul ul {
	margin: -16px 0px 0px 100px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	display:none; 
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	display:block;
	position:absolute;
	z-index:1;
}

#nav li:hover li a, #nav li.sfhover li a {
	background-color:#69f;
	border-bottom:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;
	
	color:#FFFFFF;
}
#nav li li a:hover, #nav li li a.sfhover {
	background-image:url(../Images/Nav_bar_slice_over.png);
	background-repeat:repeat;
	color: #000;
}

Note: everything that is a #nav falls in the div.Navigation, which is why I included it.
Anyone see what I'm missing as to why I can't get the top level menu items to center?

 

[BillyRayPreachersSon]

I've not looked into the answer to your question, but do know that this is invalid CSS, and will probably cause some browsers to barf:

#margin-top:auto;

Also:

- Does your HTML and CSS fully validate?
- Do you have a complete and valid DOCTYPE?
- What does your HTML look like?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Vragabond]

Your code should have the text in the top links centered. However, you haven't shown us your HTML, and therefore we cannot know what should be centered in the link. One thing I see (on top of Dan's notice of erroneous CSS property) is that you do not reset margins and paddings on a <li> element. If there is some default margin or padding on that element, that could be causing your text to not appear centered.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[irbk]

#margin-top:auto;

is an IE hack to get IE to display correctly.
Yes, I validate according to the W3C Validation Markup Service.
Here is the HTML.

<div class="Navigation">
		
			<ul id="nav">
							
<li>
 <a href="aboutus.php?page=about_us">About Us</a>
 <ul>
  <li>
   <a href="aboutus.php?page=contract_vehicles">Contract Vehicles</a>
  </li>
  <li>
   <a href="aboutus.php?page=locations">Locations</a>
  </li>
  <li>
   <a href="contact.php?page=contact">Contact Us</a>
  </li>
 </ul>
</li>
 
<li>
 <a href="services.php?page=services">Services</a>
 <ul>
  <li>
   <a href="services.php?page=environmental_services">Environmental Services</a>
   <ul>
    <li>
     <a href="services.php?page=air_quality">Air Quality</a>
    </li>
    <li>
     <a href="services.php?page=brownfields">Brownfields</a>
    </li>
    <li>
     <a href="services.php?page=industrial_hygiene">Industrial Hygiene</a>
    </li>
    <li>
     <a href="services.php?page=landfills">Landfills</a>
    </li>
    <li>
     <a href="services.php?page=natural_resources">Natural Resources</a>
    </li>
    <li>
     <a href="services.php?page=remedial_design">Remedial Design</a>
    </li>
    <li>
     <a href="services.php?page=remedial_investigation">Remedial Investigation</a>
    </li>
    <li>
     <a href="services.php?page=risk_assessment">Risk Assessment</a>
    </li>
    <li>
     <a href="services.php?page=web-based_information">Web-based Information</a>
    </li>
   </ul>
  </li>
  <li>
   <a href="services.php?page=homeland_security_emergency_response">Homeland Security/Emergency Response</a>
  </li>
  <li>
   <a href="services.php?page=infrastructure_engineering">Infrastructure Engineering</a>
   <ul>
    <li>
     <a href="services.php?page=construction_management">Construction Management</a>
    </li>
    <li>
     <a href="services.php?page=municipal">Municipal</a>
    </li>
    <li>
     <a href="services.php?page=site_development">Site Development</a>
    </li>
    <li>
     <a href="services.php?page=surveying_cadd_gis">Surveying, CADD, and GIS</a>
    </li>
    <li>
     <a href="services.php?page=transportation_design">Transportation Design</a>
    </li>
   </ul>
  </li>
  <li>
   <a href="services.php?page=remedial_design_build_operate">Remedial Design/Build/Operate</a>
  </li>
  <li>
   <a href="services.php?page=traditional_construction">Traditional Construction</a>
  </li>
 </ul>
</li>
 
<li>
 <a href="projects.php?page=featured_projects">Featured Projects</a>
 <ul>
  <li>
   <a href="projects.php?page=seawall_repair">New York Seawall</a>
  </li>
  <li>
   <a href="projects.php?page=pemaco_site">Pemaco Site</a>
  </li>
  <li>
   <a href="projects.php?page=tongue_point">Tongue Point</a>
  </li>
 </ul>
</li>
 
<li>
 <a href="news.php?page=news">News</a>
</li>
 
<li>
 <a href="careers.php?page=careers">Careers</a>
 <ul>
  <li>
   <a href="careers.php?page=benefits">Benefits</a>
  </li>
  <li>
   <a href="careers.php?page=jobs">Jobs</a>
  </li>
 </ul>
</li>
			</ul>
		
		</div>

Everything works exctally the way I want it too, with the exception of being able to center the top level menu items.

 

[irbk]

Oh, and in regards to resetting the margins and padding, I start out my css with

*{margin:0;padding:0;}

so that there isn't anything "built in" where I don't want it.

 

[BillyRayPreachersSon]

I'll re-ask:

- Do you have a complete and valid DOCTYPE?

Perhaps posting a URL so we don't have to keep asking for bits of code that you omit might be an easier way of resolving this?



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[irbk]

Yes, I have a valid doctype. Sorry for not answering that specifically but I was under the impression that one needed a valid doctype for the W3C Validation Markup Service to give you complete validation.

 

[irbk]

Sorry I can't supply a URL. It's for an internal site.

 

[BillyRayPreachersSon]

I was under the impression that one needed a valid doctype for the W3C Validation Markup Service to give you complete validation.

Nope - you can manually specify it in the "more options" section.


Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[irbk]

Yes, it has a valid doctype.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

 

[irbk]

So, now that you know it has a valid doctype, any advice?

 

[BillyRayPreachersSon]

Adding this to the "div.Navigation" rule works for me:

width: 35em; /* number of nav items * width of each item */
margin: 0px auto;

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[irbk]

That does indeed center my 5 top level menu items, but it centers the entire "bar" along with it (meaning the background color of the navigation section is limited to the 35em we've set the div.navigation too. If worse comes to worse, I supose I could create a container for my navigation container to have the menu bar background color display all the way across the page, but I'd perfer not to do that if at all possible. Any other ideas?

 

[irbk]

Plus, that doesn't spread my menu items out over the entire width of the menu (~800px).
See, I had it centered before, but the problem was that it was only "centered" because of the amount of menu items and the size of each. What I came to find out is that when some one viewed the sight with a DPI set above normal, items that were on the menu would "fall off" the menu and disappear beneath the menu bar. In order to avoid this, I trimed the menu line from 7 items down to the 5 items that I have now. Ideally what I want is for each of the 5 menu items to space themself's approprate to what space they have. I'm not even sure that's possible now that I think about it. As a matter of fact, now that I think about it, I wonder if my issue exists in the fact that I'm specifying the size here

#nav li a { width: 7em; etc....}

in EM. Thus, when the viewer's DPI changes, the size of the #nav li a is going to change. Whereas if I set the size there in PX, the size should stay constant, regardless of the DPI of the viewer?
What do you think?

 

[irbk]

That was it! I changed the #nav li a from a width of 7em to 160 px (size of menu bar devided by the number of menu items) and boom, exctally what I want. I also tested at a larger DPI and things still display correctly! Don't know why I didn't catch this sooner and while I did answer my own question, thanks BillyRayPreachersSon. I'm not sure I would have realized what I was doing wrong if I wasn't replying to your post.

 

[BillyRayPreachersSon]

No problem



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/