Problem with centering nav bar

@lkruczekSep 12.2010

I’m creating the following website that you can see at:

~~[url]~~http://www.lisakruczek.com/prison/navtest.html[/url]

What I’d like to do is center the whole nav bar,. I can’t figure out how to get that purple bar to the left so it’s all flush. Here’s the css file:

#nav {
margin:0px 0 0px 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}

/* the styling */
#nav {width:600px; height:20px; background:#666699; position:relative;}

#nav .select, #nav .current {margin:0; padding:0; list-style:none;}

#nav li {display:inline; margin:0; padding:0; height:auto;}

#nav .select a,
#nav .current a {
display:block;
height:20px;
float:left;
background:#666699;
padding:0 10px 0 10px;
text-decoration:none;
font-size:14px;
line-height:20px;
white-space:nowrap;
color:#fff;
font: arial, helvetica;
font-style: normal;
}
* html #nav .select a, * html #nav .current a {width:1px; height:20px;}

#nav .select a:hover,
#nav .select li:hover a {
background:#333366;
cursor:pointer;
color:#FFF;

}

#nav .sub {display:none;}

/* for IE5.5 and IE6 only */
#nav table {position:absolute; border-collapse:collapse; left:0; top:0;}

#nav .current a {background:#333366; color:#FFF;}

#nav .sub li a:hover,
#nav .select a:hover .sub li a:hover,
#nav .select li:hover .sub li a:hover {
background:#333366;
color:#FFFFFF;
text-decoration: underline;
}

#nav .sub_active .current_sub a,
#nav .sub_active a:hover {background:#333366; color:#FFF;text-decoration: underline;}

#nav .select li a:hover .sub,
#nav .select li:hover .sub {display:block; position:absolute; width:603px; top:20px; left:0; background:#333366; margin-top:0; padding:0; z-index:100; color:#fff; font-size:12px;}

#nav .sub, #nav .sub_active {margin:0; padding:0; list-style:none;}

#nav .sub_active {display:block; position:absolute; width:807px; top:20px; left:0; background:#333366; margin-top:0; padding:0; z-index:10;}
* html #nav .sub_active, * html #nav .select a:hover.sub {z-index:-1; margin-top:0; margin-top:1px;}

#nav .sub_active a {height:20px; text-decoration:none; line-height:20px; white-space:nowrap; display:block; float:left; background:#333366; padding:5px 10px 10px 10px; margin:0; font-size:12px; white-space:nowrap; border:0; color:#fff;}

#nav .select a:hover .sub li a,
#nav .select li:hover .sub li a {display:block; background:#333366; padding:5px 10px 10px 10px; margin:0; white-space:nowrap; border:0; color:#fff; font-size:12px;}

Any ideas? Thanks so much.

-Lisa

to post a comment

CSS

14 Comments(s) _↴

@DanInMASep 13.2010 — #try changing

[CODE]<td valign="top" height="30" align="center "><div id="nav"> [/CODE]

to [CODE]<td valign="top" height="30" align="left "><div id="nav"> [/CODE]

@lkruczekauthorSep 13.2010 — #Well, this got the bar to fit, thanks, but now the navigation is justified left. I want it to be centered. Any ideas on that?

Thanks again

Lisa

@DanInMASep 14.2010 — #well your using tables for your layout so that complicates things a tad.

I messed around a bit with firefox and the only thing i could think of was adding a padding-left:150px; to #nav

oh dont forget to add a doctitle,

@KorSep 14.2010 — #To center horizontally an element:

- make sure the element is a native block level one. If not, give it a display:block

- make sure your element has a certain width (in CSS)

- give it left and right auto margins (left-margin:auto ; right-margin:auto)

Now the element will be centered [I]relative to its parent[/I] (important).

@lkruczekauthorSep 17.2010 — #I used both ideas, thanks! In firefox it looks great. But in Safari and Explorer it's off. Does that happen a lot? Is there a tag I should be looking for?

Thanks so much for your help!!!

@WebJoelSep 17.2010 — #IE adds proprietary padding & margins.

Your FIRST rule is CSS should always be:

<style>

[B]* padding:0; margin:0;[/B]

</style>

which sets ALL elements to "zero" for padding and for margins. -Solves a plethora of evils that IE shows... PLUS:

you can omit all instances of things like:

[B]margin:0px 0 0px 0;[/B]

etc... because ALL elements are now "zero" for all padding, all margins.. Smaller CSS code.

@KorSep 17.2010 — #I used both ideas, thanks! In firefox it looks great. But in Safari and Explorer it's off. Does that happen a lot? Is there a tag I should be looking for?

Thanks so much for your help!!![/QUOTE]
Give us the code or post a link to a test page.

@lkruczekauthorSep 17.2010 — #It's the same link as before

www.lisakruczek.com/prison/navtest.html

@lkruczekauthorSep 17.2010 — #Webjoel-

My other problem is one of the fixes that DaninMa gave me (see above) relies on padding. So could that be a problem?

@lkruczekauthorSep 17.2010 — #Here's the CSS

#nav {

font-family: Arial, Helvetica, sans-serif;

text-align: center;

}

/* the styling */

#nav {width:600px; height:20px; background:#666699; position:relative; padding-left:138px}

#nav .select, #nav .current {margin:0; padding:0; list-style:none;}

#nav li {display:inline; margin:0; padding:0; height:auto;}

#nav .select a,

#nav .current a {

display:block;

height:20px;

float:left;

background:#666699;

padding:0 10px 0 10px;

text-decoration:none;

font-size:14px;

line-height:20px;

white-space:nowrap;

color:#fff;

font: arial, helvetica;

font-style: normal;

}

* html #nav .select a, * html #nav .current a {width:1px; height:20px;}

#nav .select a:hover,

#nav .select li:hover a {

background:#333366;

cursor: pointer;

color:#FFF;

}

#nav .sub {display:none;}

/* for IE5.5 and IE6 only */

#nav table {position:absolute; border-collapse:collapse; left:0; top:0;}

#nav .current a {background:#333366; color:#FFF;}

#nav .sub li a:hover,

#nav .select a:hover .sub li a:hover,

#nav .select li:hover .sub li a:hover {

background:#333366;

color:#FFFFFF;

text-decoration: underline;

}

#nav .sub_active .current_sub a,

#nav .sub_active a:hover {background:#333366; color:#FFF;text-decoration: underline; }

#nav .select li a:hover .sub,

#nav .select li:hover .sub {display:block; position:absolute; width:513px; top:20px; left-margin:auto; right-margin:auto left:0; background:#333366; margin-top:0; padding:0; z-index:100; color:#fff; font-size:12px;}

#nav .sub, #nav .sub_active {margin:0; padding:0; list-style:none; }

#nav .sub_active {display:block; position:absolute; width:513px; top:20px; float:center; left:0; background:#333366; margin-top:0; padding:0; z-index:10;}

* html #nav .sub_active, * html #nav .select a:hover.sub {z-index:-1; margin-top:0; margin-top:1px;}

#nav .sub_active a {height:20px; text-decoration:none; line-height:20px; white-space:nowrap; display:block; float:left; background:#333366; padding:5px 10px 10px 10px; margin:0; font-size:12px; white-space:nowrap; border:0; color:#fff;}

#nav .select a:hover .sub li a,

#nav .select li:hover .sub li a {display:block; background:#333366; padding:5px 10px 10px 10px; margin:0; white-space:nowrap; border:0; color:#fff; font-size:12px;}

@WebJoelSep 17.2010 — #Which navbar are you trying to center? Looks centered to me. Do you mean the 'drop-down' sub-menu? On my screen, that goes off to the right and disappears off-screen.

I noticed in passing, this:

[CODE]<tr bgcolor="#666699">
 <td height="30" align="left" valign="top"><table width="399" border="0">
 
 <tr>
 
   [B]<div id="nav"> 
   <ul class="select">
   <li><a href="visit.html?current=one&amp;sub=none">Visiting The Museum 
   <!--[if IE 7]><!-->
   </a> 
   <!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul class="sub">
   <li ><a href="hours.html?current=one&amp;sub=a">Hours</a></li>
 
   <li><a href="admission.html?current=one&amp;sub=c">Directions</a></li>
   <li><a href="directions.html?current=one&amp;sub=d">Admission</a></li>
   <li><a href="holiday.html?current=one&amp;sub=e">Group Tours</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>[/B]....[/CODE]

The only element that can be in a <tr> is a <td> (could solve this by wrapping the <ul> in a <td></td> still, both browsers seem to render it the same. It just throws a validation error.. Even though there is a TD in the first TR, you incorrectly nest a UL in the second TR

also:

if this is important:

* html #nav .sub_active, * html #nav .select a:hover.sub {[B]z-index:-1;[/B] margin-top:0; margin-top:1px;}

I think that only IE renders 'negative' z-index. Other browsers do not. I might be mistaken, -worth checking.. I never use 'negative' z-index for this reason. Always positive integers. :-)

and:

#nav .sub_active {display:block; position:absolute; width:513px; top:20px; [B]float:center;[/B] left:0; background:#333366; margin-top:0; padding:0; z-index:10;}

no such. Floats are either left, or right. No center.

found this:

#nav .select li:hover .sub {display:block; position:absolute; width:513px; top:20px; left-margin:auto; [B]right-margin:auto left:0;[/B]

-needs a ";" after "auto"

---

Just looked at the fix DaninMa gave (above) and yes, I see some difference.

Fx seems to show something different than IE. Find these items I pointed out and repair them, see how this helps.

also:

"....[I]relies on padding. So could that be a problem?[/I] "

Only if you [I]don't[/I] use " [B]* {margin:0; padding:0}[/B] " as your first rule in the CSS. IE adds its own proprietary margins & padding to everything, compliant browsers do not. So if you created something and give it say, "padding:6px;" IE will probably show it more like "8px" padding... (it adds the explicit padding to its own default padding/margin)

By stripping these margin/padding with the 'universal selector' shown here (" *[B] {....}[/B] ") IE shows the same as Fx et~al. Then, any added 'padding' or 'margin' will be rendered exactly the same for all.

@lkruczekauthorSep 17.2010 — #Well that's weird. I made the fixes and after adding the semicolon after right margin, the whole subnav bar stays to the left now.

The other 2 fixes don't seem to make a difference.

If I used the {margin:0; padding:0} at the top, where should I then adjust the padding to center it?

@lkruczekauthorSep 17.2010 — #ok, I fixed the subnavbar centering thing.

@lkruczekauthorSep 17.2010 — #In looking at the problem, it's almost as if the sub bar is justified left underneath the main bar. Yet, in Firefox it's centered. Here's the css as it stands now:

#nav {

font-family: Arial, Helvetica, sans-serif;

text-align: center;

}

/* the styling */

#nav {width:600px; height:20px; background:#666699; position:relative; padding-left:138px;}

#nav .select, #nav .current {margin:0; padding:0; list-style:none;}

#nav li {display:inline; margin:0; padding:0; height:auto;}

#nav .select a,

#nav .current a {

display:block;

height:20px;

float:left;

background:#666699;

padding:0 10px 0 10px;

text-decoration:none;

font-size:14px;

line-height:20px;

white-space:nowrap;

color:#fff;

font: arial, helvetica;

font-style: normal;

}

* html #nav .select a, * html #nav .current a {width:1px; height:20px;}

#nav .select a:hover,

#nav .select li:hover a {

background:#333366;

cursor:pointer;

color:#FFF;

}

#nav .sub {display:none;}

/* for IE5.5 and IE6 only */

#nav table {position:absolute; border-collapse:collapse; left:0; top:0;}

#nav .current a {background:#333366; color:#FFF;}

#nav .sub li a:hover,

#nav .select a:hover .sub li a:hover,

#nav .select li:hover .sub li a:hover {

background:#333366;

color:#FFFFFF;

text-decoration: underline;

}

#nav .sub_active .current_sub a,

#nav .sub_active a:hover {background:#333366; color:#FFF;text-decoration: underline; }

#nav .select li a:hover .sub,

#nav .select li:hover .sub {display:block; position:absolute; width:513px; top:20px; left-margin:auto; right-margin:auto; background:#333366; margin-top:0; padding:0; z-index:100; color:#fff; font-size:12px;}

#nav .sub, #nav .sub_active {margin:0; padding:0; list-style:none; }

#nav .sub_active {display:block; position:absolute; width:513px; top:20px; left-margin:auto; right-margin:auto; background:#333366; margin-top:0; padding:0; z-index:10;}

* html #nav .sub_active, * html #nav .select a:hover.sub {z-index:0; margin-top:0; margin-top:1px;}

#nav .sub_active a {height:20px; text-decoration:none; line-height:20px; white-space:nowrap; display:block; background:#333366; padding:5px 10px 10px 10px; margin:0; font-size:12px; white-space:nowrap; border:0; color:#fff;}

#nav .select a:hover .sub li a,

#nav .select li:hover .sub li a {display:block; background:#333366; padding:5px 10px 10px 10px; margin:0; white-space:nowrap; border:0; color:#fff; font-size:12px;}

Is there anything that Explorer and Safari might be using to send it left?

Also in #CSS _↴

problem with firefox Problem With CSS positioning How to crash IE 6, LOL!

Success!

Help @lkruczek spread the word by sharing this article on Twitter...

Tweet This

Problem with centering nav bar

14 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Problem with centering nav bar

14 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #CSS _↴