WordPress.org

1. csgillis
   Member
   Posted 6 years ago #
   

   I was wondering if anyone had a clue as to why my navigation has this gap on it and is pushed way to the right:

   http://saltlinestudio.com/blog

   It should look like - http://saltlinestudio.com

   I've tried so many combinations with the CSS and have not been able to fix this bug.

   Any help on this would be greatly appreciated.

2. csgillis
   Member
   Posted 6 years ago #
   

   Any thoughts on this bug?

3. whooami
   Member
   Posted 6 years ago #
   

   thats a bug? you do this for a living or no?

   Your CSS between the 2 pages isnt the same..

   On the main page, you have:

   #nav {
       margin: 0 auto 0 auto;
       background:#46402E;
       padding:0px 20px 15px 0;
       width: 680px;
       height:15px;
       }
   #nav li {
       margin: 0;
       display: inline;
       padding: 0px 18px 15px 0;
       border-right: 1px solid #716759;
       list-style: none;
       }
   #nav a {
       float: left;
       line-height: 14px;
       font-weight: bold;
       margin: 7px 10px 7px 10px;
       text-decoration: none;
       color: #E0DAD2;
       }
   #nav a:hover {
       color: #B8B2AB;
       }
   #nav a:active {
       font-weight: bold;
       color: #fff;
       }
   #nav ul{
       margin:0;
       padding:0;
       list-style:none;
       }
   #nav li {
       float: left;
       margin:0;
       padding:1px;
       font-family: Georgia, serif;
       font-size: 69%;
       letter-spacing: 1px;
       text-transform: uppercase;
       }

   On the blog page, you have:

   #navbar {
       margin: 0;
       background:#46402E;
       padding:0 20px 30px 0;
       width: 690px;
   	}
   #navbar li {
       display: inline;
       border-right: 1px solid #716759;
       list-style: none;
   	}
   #navbar a {
       float: left;
       line-height: 14px;
       font-weight: bold;
       margin: 7px 10px 7px 10px;
       text-decoration: none;
       text-transform: uppercase;
       color: #E0DAD2;
   	}
   #navbar a:hover {
       color: #B8B2AB;
       text-transform: uppercase;
   	}

   forget the fact that the id is named differently. Look at the code.

   How about:

   #navbar {
       margin: 0 auto 0 auto;
       background:#46402E;
       padding:0px 20px 15px 0;
       width: 680px;
       height:15px;
       }
   #navbar li {
       margin: 0;
       display: inline;
       padding: 0px 18px 15px 0;
       border-right: 1px solid #716759;
       list-style: none;
       }
   #navbar a {
       float: left;
       line-height: 14px;
       font-weight: bold;
       margin: 7px 10px 7px 10px;
       text-decoration: none;
       color: #E0DAD2;
       }
   #navbar a:hover {
       color: #B8B2AB;
       }
   #navbar a:active {
       font-weight: bold;
       color: #fff;
       }
   #navbar ul{
       margin:0;
       padding:0;
       list-style:none;
       }
   #navbar li {
       float: left;
       margin:0;
       padding:1px;
       font-family: Georgia, serif;
       font-size: 69%;
       letter-spacing: 1px;
       text-transform: uppercase;
       }

   sigh, and people get paid to do this, un-fricken-believable :(

4. csgillis
   Member
   Posted 6 years ago #
   

   Thanks for the post. I'm new to wordpress and actually laying sites out with CSS instead of tables. No I haven't done this for a living, but have been a web/print graphic designer for 7 years (if you know they do?)

Topic Closed

This topic has been closed to new replies.