#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2012
    Posts
    5
    Rep Power
    0

    Small Extra Linking Blocks Beside Anchor Blocks


    This is very strange. Here's the code:

    Code:
    nav {
      position:relative;
    }
    ul.navul {
      padding:0;
      margin:0;
      background-color:rgba(12,11,11,0.9);
    }
    .navul li {
      list-style-type:none;
      display:inline-block;
      border-left:1px solid white;
    }
    .navul li:first-child {
      border-left:none;
    }
    .navul a {
      display:inline-block;
      padding:10px;
      margin:0px;
      text-decoration:none;
      color:#fff;
      border:1px solid blue;
    }
    Here is a snapshot of what I see:



    As I decrease the padding in 'a' tag, the size of the blocks go smaller and vice versa. I have already made list-style-type as "none". I have tried making padding:0 and margin:0 on 'li' tag but it doesn't seem to work. I really don't have a clue of what's going on.

    What are these unknown Little Blue Linked Boxes? Can anyone help?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2015
    Posts
    63
    Rep Power
    3
    You should show us the HTML code.

    Originally Posted by schttrj
    This is very strange. Here's the code:

    Code:
    nav {
      position:relative;
    }
    ul.navul {
      padding:0;
      margin:0;
      background-color:rgba(12,11,11,0.9);
    }
    .navul li {
      list-style-type:none;
      display:inline-block;
      border-left:1px solid white;
    }
    .navul li:first-child {
      border-left:none;
    }
    .navul a {
      display:inline-block;
      padding:10px;
      margin:0px;
      text-decoration:none;
      color:#fff;
      border:1px solid blue;
    }
    Here is a snapshot of what I see:



    As I decrease the padding in 'a' tag, the size of the blocks go smaller and vice versa. I have already made list-style-type as "none". I have tried making padding:0 and margin:0 on 'li' tag but it doesn't seem to work. I really don't have a clue of what's going on.

    What are these unknown Little Blue Linked Boxes? Can anyone help?

IMN logo majestic logo threadwatch logo seochat tools logo