Support » Fixing WordPress » What's wrong with my css code?

  • I’m trying to get my menu bar to center and I can’t seem to decipher the code… I’ve literally been at this for hours now and can’t seem to find a solution.

    The page is located here: goodrichresidential.com and you will be able to notice the menu right away.

    /* =Menu
    -------------------------------------------------------------- */
    
    #access {
    	background: #f;
    	margin: 0 auto;
    	width: 925px;
    	display: block;
    }
    #access .menu-header,
    div.menu {
    	font-size: 13px;
    	margin: 0 auto;
    	width: 600px;
    	padding-left: 80px;
    }
    #access .menu-header ul,
    div.menu ul {
    	list-style: none;
    	display:block;
    	margin: 0 auto;
    	padding-right: 80px;
    	width: 600px;

    Can anyone help?

    Thanks,

    Dan

Viewing 6 replies - 1 through 6 (of 6 total)
  • It looks to me like you need to increase your width to 660px and remove the left padding of 80px.

    Hmm… I just tried that no luck. Maybe I didn’t include all the code necessary to fix it. Maybe this is enough to figure it out?

    /* =Menu
    -------------------------------------------------------------- */
    
    #access {
    	background: #f;
    	margin: 0 auto;
    	width: 925px;
    	display: block;
    }
    #access .menu-header,
    div.menu {
    	font-size: 13px;
    	margin: 0 auto;
    	width: 660px;
    }
    #access .menu-header ul,
    div.menu ul {
    	list-style: none;
    	display:block;
    	margin: 0 auto;
    	padding-right: 80px;
    	width: 660px;
    }
    #access .menu-header li,
    div.menu li {
    	float: left;
    	position: relative;
    }
    
    #access a {
    	display:block;
    	color:#584D4D;
    	font-family:'Baskerville','Times New Roman',serif;
    	text-decoration:none;
    	/*line-height:38px;*/
        padding:0px 15px;
        margin-left: 4px;
        /*font-weight:bold;*/
    }

    Dan

    I just looked at your site and the nav appears to be correct.

    So I’ve looked at the website in dfferen’t browsers… Safari appears to be the only one displaying the menu incorrectly. Here is the code I’m using currently:

    /* =Menu
    -------------------------------------------------------------- */
    
    #access {
    	background: #f;
    	margin: 0 auto;
    	width: 925px;
    	display: block;
    }
    #access .menu-header,
    div.menu {
    	font-size: 13px;
    	margin: 0 auto;
    	width: 700px;
    }
    #access .menu-header ul,
    div.menu ul {
    	list-style: none;
    	display:block;
    	margin: 0 auto;
    	width: 620px;
    }
    #access .menu-header li,
    div.menu li {
    	float: left;
    	position: relative;
    }

    Thanks

    Dan

    Safari seems to get everything one one line when div.menu ul {width: 650px; }

    You have an inline style of “float: left” assigned to #access which is likely messing it up. It should center using #access with an assigned width (must be less than containing element width and margin: 0 auto;

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘What's wrong with my css code?’ is closed to new replies.