SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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
    Attached Files Attached Files

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Last edited by benisjamin; May 17, 2011 at 00:59. Reason: Put wrong info in paragraph

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by benisjamin View Post
    Hey Eric,

    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
    visibility:inherit is the name of Eric's site

    If you want a browsers support list then we have one of the best at Sitepoint. IE7 and under don't support the value inherit except for direction and visibility.

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    I think the word "D`oh" springs to mind!

    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. :-)

    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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by benisjamin View Post
    Hey Paul,
    , is there anything out there that I can use to test for mainly FF/Opera/Chrome . I
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •