CODEWITHSUNDEEP
htmlcss
Baldráni
Baldráni

Reputation: 5640

Difference of pixel in border I can't figure where it is coming from

Hi I'm doing a really simple navigator but I just came up into a strange problem I can't figure out where this is coming from.

My separations are not exactly till, they are created the same way.. Some are tougher than other and I don't get why.

enter image description here

Could it be due to the font ? I tried it with different browser and the problem is persistent...

JsFiddle There

The code is really simple :

HTML

<nav id="main-menu2">
  <a href="/"><span class="fa fa-home"></span></a>
  <a href="/">DERNIÈRES MINUTES</a>
  <a href="/">SÉJOURS</a>
  <a href="/">CROISIÈRES</a>
  <a href="/">CIRCUITS</a>
  <a href="/">FRANCE</a>
  <a href="/">WEEK-ENDS</a>
  <a href="/">VOYAGE À LA CARTE</a>
  <a href="/">PROMOS</a>
</nav>

SCSS

$darkOrange: #ed6d00;
#main-menu2 {
  background-color: $darkOrange;
  width: 100%;
  text-align: center;
  font-size: 0.7em;
  a{
    color: #fff;
    text-decoration: none;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    margin-left: -2px;
    margin-right: -2px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 1.3em;
    line-height: 1.7em;
  }
  .fa-home{
    font-size: 23px;
    position: relative;
    top: 2px;
    }
}

Upvotes: 4

Views: 473

Answers (2)

KittMedia
KittMedia

Reputation: 7466

Manage it with the font-size:

#main-menu2 {
    font-size: 0;
}

#main-menu2 a {
    font-size: 14.5px;
    margin-left: -1px;
    margin-right: 0;
}

The whole code:

$darkOrange: #ed6d00;
#main-menu2 {
  background-color: $darkOrange;
  width: 100%;
  text-align: center;
  font-size: 0;
  a{
    color: #fff;
    text-decoration: none;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    margin-left: -1px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14.5px;
    line-height: 1.7em;
  }
  .fa-home{
    font-size: 23px;
    position: relative;
    top: 2px;
    }
}

Demo: JSFiddle

It is because in your code you have some space by indent the text. Unfortunately all browsers interprete these content as white spaces and thus you have some gap between the elements.

Upvotes: 1

enguerranws
enguerranws

Reputation: 8233

I can't reproduce the bug, but I may have a solution : you're currently using borders that you don't need. Let me explain : there is a border right on Séjours and a border left on Croisières. So 2 borders, and you're currently hiding one of them.

Using font-size in em, makes your trick (margin-left / margin-right : -2px) unconsistent, because em can't really be converted into px (well it can, but it will depends on the browser calculation so you may need more than 2px to make a border go over another, maybe 1px maybe 1.5487px).

So, my solution : removes all the unecessary borders :

a {
   border-left: 1px solid #fff;
} 
a:last-child {
   border-right: 1px solid #fff;
}

No more borders overlapping, more reliable solution.

Upvotes: 1

Related Questions