Centering a navigation bar in CSS - is it a Myth?

HTML & CSS
1

Hi all,

I have a content box 960px wide with a height set to auto ( disregard the height as being set to auto, as the reason I have chosen this value over a set height in px is because each page has a different amount of content in)
Back to the navigation menu…

The problem Im having is on pressing CTRL - or CTRL + in different browsers, the nav buttons move either left of right of there original position - they dont break out completely and by that I mean the last button doesnt drop down underneath the first button, its that they dont stay fairly central, and they obviously render differently in different browsers. I know by there nature they will expand as Im using “ems” on all padding/margins and font-size, but I cannot seem to find a medium where by Im happy, its either too far left or too far right…

Any tips or tricks to get around this would be most appreciated . I have included the index.html and the css file along with the images, hopefully it will work, if it does not get back in touch, I will have to upload the files again with some modifications…

All the best

Ben

2

This should get you started { visibility: inherit; } How To Center Your Navigation Menu

3

Hey Eric,

Sounds good, Ill give it a go and let you know how I get on.

Out of interest Ive tried “googleing” browser support for the visibility: inherit; and cannot seen to find a defined list anywhere, some sites are stating just IE browser types and then none of the others etc

Have you got a defined list out of interest. Im trying to get all my sites to work with with effectively the latest browser for each platform ( IE9 Safari 5.0.5 etc etc ) and then back 2 versions aswell.

Cheers for once again for your reply

Benisjamin

4

visibility:inherit is the name of Eric’s site :slight_smile:

If you want a browsers support list then we have one of the best at Sitepoint. IE7 and under don’t support the [URL=“http://reference.sitepoint.com/css/inheritvalue”]value inherit except for direction and visibility.

5

Hey Paul,

I think the word “D`oh” springs to mind! :lol:

Ive just tried 1 of erics demo code snippets and made few little alterations on padding/margin etc, and it seems to work superbly across all the latest browser versions Ive got on my desktop. There`s only 1 slight issue, Ive got adobe browserlabs but im wanting to test sites to see how they render in older browser types offline, is there anything out there that I can use to test for mainly FF/Opera/Chrome . I have actually downloaded some free software called IE tester but for some reason the IE7 browser wont work at all, all other verisons load the page up for you so maybe one for IE too .

Any other help greatly appreciated. :slight_smile:

This is is the code as it stands now: (The original CSS / HTML is above)

#nav {
text-align:center;
margin-bottom:2em;
}
#nav ul {
display:inline-block;
list-style:none;
}

  • html #nav ul { /* Target IE6 */
    display:inline;
    }

+html #nav ul { / Target IE7 */
display:inline;
}

#nav li {
display:inline;

}

#nav a {
background: #fff url(images/navbgnew.png) repeat-x 0 -5px;
float:left;
text-decoration:none;
color:#191970;
padding:0.8em 1.4em; /* variable width */
font-size:1.1em;
font-weight:bold;
}

#navHome a{
-moz-border-radius-bottomleft:1em;
-webkit-border-bottom-left-radius:1em;
-o-border-bottom-left-radius:1em;
border-bottom-left-radius:1em;
}

#navContact a{
-moz-border-radius-bottomright:1em;
-webkit-border-bottom-right-radius:1em;
-o-border-bottom-right-radius:1em;
border-bottom-right-radius:1em;
}

#nav a:hover{
background: #fff url(images/navbg.png) repeat-x 0 0;
color:#191970;
}

#nav a:active{
background: #fff url(images/navbg.png) repeat-x 0 0;
}

6

You can just download the older versions of those in most cases but I wouldn’t bother for Opera as the latest version is the only one to worry about as opera users nearly all upgrade.

The same applies to google chrome as a new version comes out every day it seems like. I would also only test on the latest couple of versions of Safari also for similar reasons.

However FF3+ should be tested on and you can load a portable version to test with without affecting your current system

IE tester works for me on xp although it does crash a bit and is still the easiest alternative for IE testing.