anyone have any idea on this?
well… first you should try validating because you have a lot of validation errors.
After that, if I were you’d I’d try putting text-align:center on “#navigation ul” (you have text-align:left).
How about applying a centered margin to #navigation:
#navigation { margin:0 auto 0 auto; …. }
Here is my code. I have tried a number of things.
/* Begin Navigation Elements */
#navigation {display: block; background: url('images/page_nav.png')repeat; text-align: center; height: 2em; padding: 2px 0; border-top: 15px solid #ffffff; border-bottom: 2px solid #ffffff; }
#nav {padding-left: 20px; min-width: 960px; margin: 0 auto;}
#nav, #nav ul {text-align: center;
font-size: 1.1em; list-style: none; font-weight: normal; z-index: 8;}
#nav li {float:left;padding: 0; margin: 0;}
#nav a {border-right: 0px solid #000000; display: block; line-height: 2em; padding: 0 15px; color: #000000; text-decoration: none; font-weight: bold;
font-family: "verdana", Arial, Helvetica,
sans-serif; font-size:1em; color:brown;
}
#nav a:hover {color: #000000;}
#nav li ul {margin: 0; padding: 0; font-size: 1em; border: 1px solid #ddd;
background: url('images/page_nav.png') repeat #eee; position: absolute; left: -999em; height: auto; width: 14em;}
#nav li li {width: 14em; margin: 0;}
#nav li ul a {border-left: 1em solid #fda; margin: 0;}
#nav li ul a:hover {border-left: 1em solid #000000;}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover { color: #fff; background:none;}
#page_nav a {display: block; color:brown; padding: 10px; border: 1px solid #eee;}
#page_nav a:hover {color:brown; border: 1px solid #ddd; background: #000000;}
#breadcrumbs {position: absolute; font-size: 0.8em; top: 6px; left: 5px; text-align: left; text-transform: lowercase;}
Did you try what I suggested? It works for me locally.
no that did not work. thanks for the suggestion though. anyone else?
