CODEWITHSUNDEEP
cssgoogle-chromesafari
Stiller Eugen
Stiller Eugen

Reputation: 701

margin to border not showing in chrome/safari

Strange problem:

         .nav_active {
           padding: 8px 0 8px 0;
           border-top: 5px solid #2778ad;
           border-bottom: 5px solid #2778ad;
           border-left: none;
           border-right: none;
         }
 <span class="nav_active"><a class="active" href="/home">Home</a></span>

In FF this works fine, there are two 5px borders with 8px distance to the link on top and bottom. In chrome, the lines are directed to the link-text. If i make borders on the left and right side to, it works also in chrome.

Anyone an idea why this doesn't work on chrome?

Upvotes: 0

Views: 1271

Answers (3)

Marc
Marc

Reputation: 7884

I had same problem but only in safari and solved adding 'position:relative'

.nav_active {
       padding: 8px 0 8px 0;
       border-top: 5px solid #2778ad;
       border-bottom: 5px solid #2778ad;
       border-left: none;
       border-right: none;
       /*Added this line*/
       position:relative;
}

Upvotes: 0

mhutter
mhutter

Reputation: 2916

The border is indeed showing, but it is outside the window. It is "pushed" outside the viewable area (The browser window/body in fullscreen, the snippet preview box here on SO).

To proof this, let's push the whole thing down by 10px:

.nav_active {
    position: relative;
    top: 10px;
    margin-top: 10px;
    padding: 8px 0 8px 0;
    border-top: 5px solid #2778ad;
    border-bottom: 5px solid #2778ad;
    border-left: none;
    border-right: none;
}
<span class="nav_active"><a class="active" href="/home">Home</a></span>

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Use block or inline-block element:

.nav_active {
  padding: 8px 0 8px 0;
  border-top: 5px solid #2778ad;
  border-bottom: 5px solid #2778ad;
  border-left: none;
  border-right: none;
  display: inline-block;/*now padding-top,padding-bottom gets affected properly*/
}

Upvotes: 2

Related Questions