Jump to content

remove padding from navbar UL css


Russia

Recommended Posts

Hey guys, I am working on something and keep getting some padding on my css navabar, its pretty simple but I cant figure out where it grabbing the padding from pushing it about 5 pixels to the right.

jsfiddle live preview is a demo

and here is a picture of the hover over.

QfprKE0.png

Notice the little gray space in between the hovered over Update Profile?

I cant seem to find the code anywhere that would cause that. Anyone notice anything in my code?
 

                                                                                                

                                                            <head>

<title>2 Column CSS Layout</title>



<style type="text/css">

body {

margin: 20px;



font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;

        background-color: #555;

}

#nav {

    text-align:center;

}



   /* Begin Navigation Bar Styling */

   #nav ul {

 text-align: center;

      font-size: 11px;

      width: 100%;

    margin: 0;

    padding: 0;

    display:inline-block;

      padding: 0;

      list-style: none;

      background-color: #f2f2f2;

      border-bottom: 1px solid #ccc;

      border-top: 1px solid #ccc; }

   #nav li {

    display:inline-block;

 }

   #nav li a

 {

      display: block;

      padding: 8px 15px;

      text-decoration: none;

      font-weight: bold;

      color: #069;

      border-right: 1px solid #ccc; }

   #nav li a:hover {

      color: #c00;

      background-color: #fff; }

   /* End navigation bar styling. */





div {

text-align:center;

}

div#page {

    background-color: white;

    margin: 0 auto;

    text-align: left;

    width: 755px;

padding:0px 10px 0 10px;

}



div#header {

  border-bottom:1px solid black;

    height: 30px;

    line-height: 30px;

}



div#content {

  background: none repeat scroll 0 0 none;

  border:0px solid blue;

  width:100%;

line-height: 500px;

  min-height:500px;

    _height:500px

}



div#footer {

  border:0px solid red;

    height:30px;

    line-height: 30px;

  border-top:1px solid black;

font-size: 9pt;

}



</style>

<body>



<div id="page">

 <div id="header">



<div style="float: left;">Welcome Admin</div>

<div style="float: right;">LOGOUT</div>

   <div id="nav">



   <ul id="nav">

      <li><a href="#">Home Page</a></li>

      <li><a href="#">My Account</a></li>

      <li><a href="#">Update Profile</a></li>

      <li><a href="#">Change Avatar</a></li>

      <li><a href="#">Change Password</a></li>

      <li><a href="#">Support</a></li>



   </ul>

</div>

</div>

 <div id="content">Content</div>

 <div id="footer"><div style="float: right;">copyright 2014</div></div>

</div>





</body>

                            

                            

                           
Link to comment
Share on other sites

and for a more simple version of WebOutGateway for you is here

nav li {
    display:inline-block;
    margin: 0 -2px 0 0;
    border-right: 1px solid #ccc;
 }
   #nav li a
 {
      display: block;
      padding: 8px 15px;
      text-decoration: none;
      font-weight: bold;
      color: #069;
      }
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.