CODEWITHSUNDEEP
htmlcss
JL Griffin
JL Griffin

Reputation: 423

Phantom white space between 2 <li>s

built a simple no-dropdown horizontal nav for a new site design and its all working fine like normal except that between 2 buttons is a phantom white space that doesn't appear in dragonfly's metrics, or in the code, but is visible on the screen when the li's hover rule applies. and it does not appear between each li, just between 2 specific lis. i have attached images below showing what i mean:

no problem, everything looks as it should: No Problem

on the right side of the hovered li is a px of whitespace that shouldnt be there: Problem

    .navi {
      display: inline-block;
      height: 50px;
      max-height: 50px;
      overflow: hidden;
      list-style: none;
      float: right;
    }
    .navi li {
      float: left;
    }
    .navi li a {
      padding: 16px;
      border-left: 1px solid #8bd854;
      font-size: 16px;
      text-decoration: none;
      line-height: 50px;
      color: #8c8c8c;
      transition: all 0.5s ease;
    }
    .navi li a:hover {
      background-color: rgba(13, 137, 0, 0.61);
      text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.57);
      color: #fff;
    }
<ul class="navi">
  <li><a href="">Home</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Lawn Care</a></li>
  <li><a href="">Tree &amp; Shrub Removal</a></li>
  <li><a href="">Contact</a></li>
</ul>

any idea where this may be coming from? It's not a huge deal if not Solvable but it is an annoyance.

Thanks in advance

Upvotes: 5

Views: 1004

Answers (4)

KittMedia
KittMedia

Reputation: 7466

An easy way to fix this is by using the font-size:

.navi {
    font-size: 0;
}

.navi li {
    font-size: 1rem;
}

This sets the font size of the list to zero and the font size of the list element to the size of the root element (you may use any other unit – except em – if you want to).

Upvotes: 2

Joseph Marikle
Joseph Marikle

Reputation: 78590

I'm not entirely sure what is causing this. Maybe it's webkit or some nuance of CSS, but at least in this one particular case, you can add display:block to .navi li a and change padding: 16px to padding: 0 16px on that same rule. Unfortunately I can't figure out why this works but my best guess is that whitespace is causing the issue.

Upvotes: 1

kornieff
kornieff

Reputation: 2557

It is probably just whitespace. try 

<ul class="navi"
  ><li><a href="">Home</a></li
  ><li><a href="">About</a></li
  ...
></ul>

Upvotes: 1

Alexander Dixon
Alexander Dixon

Reputation: 874

I was able to reproduce the issue in Chrome by setting the zoom to 110%. Perhaps, you could set the zoom of all the navigation elements and their children to be zoom: 1.0;.

Upvotes: 1

Related Questions