14 Replies Latest reply: Nov 1, 2012 9:34 AM by John Waller RSS

    Trying to reduce height of navigation

    broomeGirl Community Member

      Hi this is a screenshot of my navigation bar and for some reason I cant get it to have less height.  Know its something stupid I am missing. Sorry site not live yet.  Even with a stupid figure of .6 of pixel for top and bottom padding it will not reduce in height. I cant see padding anywhere else.

       

      Screen Shot 2012-10-31 at 5.59.09 PM.png

      Here is the html

       

      <div id="Navigation">

      <ul id="navlist">

      <li><a href="index.html" class="first">Home</a></li>

      <li><a href="aboutUs.html">About Us</a></li>

      <li><a href="gallery.html">Gallery</a></li>

      <li><a href="products.html">Products</a></li>

      <li><a href="contactUs.html">Contact</a></li>

      </ul>

      </div><!--end of Navigation-->

       

      Here is the css

       

      #Navigation {

          width: 1022px;

          padding: .6px 0;

          margin: 0 auto;

          background-color:#FFF;

          border-left: 1px solid #000;

          border-right: 1px solid #000;}

         

      #navlist {

          text-align:center;}

         

      #navlist li {

          display:inline;}

         

      #navlist a {

          font: 1.2em Georgia, "Times New Roman", Times, serif;

          letter-spacing:.09em;

          color:#8f8e8e;

          text-decoration:none;

          border:none;

          padding:0 30px;}

         

      #navlist a:hover{

          color:#e5c284;}

         

       

      #navlist li a.first {

          padding:0 30px;

          color:#e5c284;}

        • 1. Re: Trying to reduce height of navigation
          MurraySummers CommunityMVP

          I think it's likely that you have limited the amount by which you can compress that nav bar with the font size declaration here -

           

          #navlist a {

              font: 1.2em

           

          See if reducing that 1.2em value helps.

          • 2. Re: Trying to reduce height of navigation
            broomeGirl Community Member

            Thanks for your response but no this is not the problem.  The 1.2em font size is only 12px as reset of font-size to 62.5% in the body tag.

            • 3. Re: Trying to reduce height of navigation
              Jon Fritz II CommunityMVP

              Copying exactly what you posted into a new document does not create the same look. You have other items somewhere else in your css that is controlling the design of your menu.

               

              Could you post a test page to a server so we can see the entire code of the page? Even if it's just to a temporary folder, hidden from public view, something like www.yoursite.com/test/page.html

               

              Once the problem is solved, you can delete the entire test folder and all of it's contents.

              • 4. Re: Trying to reduce height of navigation
                broomeGirl Community Member

                Sorry having server issues at the moment but this is all the css I have ... not really long.

                 

                  beige #e5c284*/

                 

                 

                        

                @font-face {

                    font-family:'FreebooterScriptRegular';

                    src: url('../fonts/Freebooter-Script/freebooterscript-webfont.eot');

                    src: url('../fonts/Freebooter-Script/freebooterscript-webfont.eot?#iefix') format('embedded-opentype'),

                         url('../fonts/Freebooter-Script/freebooterscript-webfont.woff') format('woff'),

                         url('../fonts/Freebooter-Script/freebooterscript-webfont.ttf') format('truetype'),

                         url('../fonts/Freebooter-Script/freebooterscript-webfont.svg#FreebooterScriptRegular') format('svg');

                    font-weight: normal;

                    font-style: normal;}

                   

                 

                 

                h1 {font: 3em 'FreebooterScriptRegular', Arial, sans-serif;

                    letter-spacing: 0;

                    margin:0 auto;

                    padding:.6em 0 0 0;

                    text-align:center;}

                 

                html, body {

                    margin:0;

                    padding:0;}

                   

                p {

                    padding:.8em 2em;}

                   

                a {color:#c0c0c0;}

                   

                   

                blockquote {font: 2.4em 'FreebooterScriptRegular', Arial, sans-serif;

                    color:#e5c284;

                    letter-spacing:.07em;

                    text-align:center;}

                 

                body {

                    font:Georgia, "Times New Roman", Times, serif;

                    font-size:62.5%;

                    color:#c0c0c0;

                    background-color:#000;}

                   

                #wrapper {

                    font-size:1.4em;

                    width: 1024px;

                    margin:0 auto;

                    padding:0;

                    background-color:#000;

                    background: url(../images/damask-2.png) repeat;}

                   

                #Header {

                    width:1024px;

                    margin:0 auto;

                    border-bottom:20px solid #000;}

                   

                #Header img {

                    margin:0;}

                   

                #Navigation {

                    width: 1022px;

                    padding: .6px 0;

                    margin: 0 auto;

                    background-color:#FFF;

                    border-left: 1px solid #000;

                    border-right: 1px solid #000;}

                   

                #navlist {

                    text-align:center;}

                   

                #navlist li {

                    display:inline;}

                   

                #navlist a {

                    font: 1.2em Georgia, "Times New Roman", Times, serif;

                    letter-spacing:.09em;

                    color:#8f8e8e;

                    text-decoration:none;

                    border:none;

                    padding:0 30px;}

                   

                #navlist a:hover{

                    color:#e5c284;}

                   

                 

                #navlist li a.first {

                    padding:0 30px;

                    color:#e5c284;}

                   

                   

                #display {

                    width: 1024px;

                    margin:0 auto;}

                   

                img {

                    border:5px solid #e5c284;

                    margin:0 auto;

                    text-align:center;

                    display:block;}

                   

                #display img {

                    float:left;

                    margin-left:20px;

                    margin-bottom:30px;}

                   

                .noBorder {

                    border:none;}

                   

                #footer {

                    clear:left;

                    width:1024px;

                    margin: 0 auto;

                    text-align:center;

                    padding:0;}                 

                 

                #footer p {

                    font: .8em Georgia, "Times New Roman", Times, serif;

                    color:#c0c0c0;

                    font-variant: small-caps;

                    padding: 10px 0 10px 0;}

                   

                #footer a {

                    color:#e5c284;}  

                • 5. Re: Trying to reduce height of navigation
                  Nancy O. CommunityMVP

                  Try zeroing out the default margins and padding of your list elements like this:

                   

                  #navlist ul {

                  margin:0;

                  padding:0

                  }

                   

                  #navlist li {

                  margin:0;

                  padding:0;

                  }

                   

                   

                   

                  Nancy O.

                  • 6. Re: Trying to reduce height of navigation
                    broomeGirl Community Member

                    Thanks Nancy did as you suggested but it made no difference.  I would have thought by applying margin and padding 0 to be body tag it would have done the same thing?

                    • 7. Re: Trying to reduce height of navigation
                      John Waller CommunityMVP

                      Any chance of us seeing the live page?

                       

                      Guessing is obviously going nowhere.

                       

                      It'll be quick and simple if we can see the live page in our browsers.

                      • 8. Re: Trying to reduce height of navigation
                        Nancy O. CommunityMVP

                        I would have thought by applying margin and padding 0 to be body tag it would have done the same thing?

                        Nope.  Browsers add default margins and padding to every element in the page.  You might try a universal (*) reset to see if that has any effect.

                         

                        * {margin:0; padding:0}

                         

                        But as John said, a link to your test page is the best/fastest way to get an answer here.

                         

                         

                        Nancy O.

                        • 9. Re: Trying to reduce height of navigation
                          broomeGirl Community Member

                          Thanks to both of you .. [removed link]

                          • 10. Re: Trying to reduce height of navigation
                            John Waller CommunityMVP

                            Adjusting the 0.6px top/bottom padding on the #Navigation rule fixes it for me here.

                             

                            Did you refresh your browser when you tried it?

                            • 11. Re: Trying to reduce height of navigation
                              broomeGirl Community Member

                              Thank you to all.  The reset for padding and margin fixed the problem

                              • 12. Re: Trying to reduce height of navigation
                                broomeGirl Community Member

                                Please remove the above url as I have deleted it.  Thanks

                                • 13. Re: Trying to reduce height of navigation
                                  Nancy O. CommunityMVP

                                  The forum doesn't allow us to edit replies after someone responds to them.

                                   

                                  Glad you got the problem solved.

                                   

                                  Nancy O.

                                  • 14. Re: Trying to reduce height of navigation
                                    John Waller CommunityMVP

                                    I've used the Report link (as seen adjacent each post in every discussion) and asked the moderators to remove the links.

                                     

                                    Now says Abuse Reported even though it was merely a request to remove the link.