my entire website shakes when i click on a link and a border is displayed

Question

The issue appears when i add a border through the "active" pseudoclass to my links. It seems as if the page is trying to resize itself because of those new pixels created by the border, but i don't know why it's doing it therefore i can't fix it.

<body>
    <header class="upper-part">
      <nav class="main-nav">
        <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#">STORE</a></li>
          <li><a href="#">ABOUT</a></li>
        </ul>
      </nav>
      <h1>THE ROOMS</h1>
    </header>
</body>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  background-color: rgb(222, 221, 221);
}
.upper-part {
  background-color: rgba(0, 0, 0, 0.524);
  background-image: url(../images/bground.jpg);
  background-position: center;
  background-size: cover;
  background-blend-mode: darken;
  color: white;
  text-align: center;
  padding-bottom: 8px;
}
.main-nav {
  border-bottom: solid rgba(255, 255, 255, 0.158) 1.5px;
}
.main-nav li {
  display: inline;
  margin: 2px;
}
.main-nav a {
  display: inline-block;
  color: white;
  text-decoration: none;
  font-size: 15px;
  padding: 15px;
}
.main-nav li :hover {
  background-color: rgba(255, 255, 255, 0.142);
}
a:active {
  border: solid white 1px;
}

Side note, avoid half-pixel measurements,e.g: `1.5px`, it could produce strange rendering results as there is no such thing as half a pixel. — Jon P, Sep 28 '22 at 01:03

score 0 · Accepted Answer · answered Sep 28 '22 at 00:58

0

You can use box-shadow to put a border within the element without creating additional pixels.

a:active {
  box-shadow:inset 0px 0px 0px 1px #fff;
}

I got the idea from this thread: Placing border inside of div and not on its edge

answered Sep 28 '22 at 00:58

lndrcrvlh

51
1
4

1

yeah it worked. I also came up with adding a border to the link itself and set its color as transparent so there won't be new pixels, just a new color for them, and it also worked. – Utam Sep 28 '22 at 01:03

score 0 · Answer 2 · answered Sep 28 '22 at 01:01

0

Here is how I work around it:

.main-nav a {
  display: inline-block;
  color: white;
  text-decoration: none;
  font-size: 15px;
  padding: 15px;
  margin: 1px;
}
a:active {
  border: solid white 1px;
  margin: 0px;
}

answered Sep 28 '22 at 01:01

Shafian

100
4

score 0 · Answer 3 · answered Sep 28 '22 at 01:07

of course, it will because the border before didn't exist, then when active it exists. so it's actually simple to avoid that. just add the borders to the a and make them transparent. border: 1px solid transparent; then when hover or active, you just change border color as long as it's the same size 1px

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  background-color: rgb(222, 221, 221);
}
.upper-part {
  background-color: rgba(0, 0, 0, 0.524);
  background-image: url(../images/bground.jpg);
  background-position: center;
  background-size: cover;
  background-blend-mode: darken;
  color: white;
  text-align: center;
  padding-bottom: 8px;
}
.main-nav {
  border-bottom: solid rgba(255, 255, 255, 0.158) 1.5px;
}
.main-nav li {
  display: inline;
  margin: 2px;
}
.main-nav a {
  display: inline-block;
  color: white;
  text-decoration: none;
  font-size: 15px;
  padding: 15px;
  border: 1px solid transparent;
}
.main-nav li :hover {
  background-color: rgba(255, 255, 255, 0.142);
}
a:active {
  border: solid white 1px;
}

  <body>
    <header class="upper-part">
      <nav class="main-nav">
        <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#">STORE</a></li>
          <li><a href="#">ABOUT</a></li>
        </ul>
      </nav>
      <h1>THE ROOMS</h1>
    </header>
</body>

Toni Michel Caubet · Answer 4 · 2022-09-28T01:16:36.490

There's few options..

Set default border

Only add to .main-nav a default 1px transparent border

.main-nav a {
    /* after all existing styles */
    border: 1px solid transparent
}

This way it wont "sake" as the border width is not changing dimensions

Use outline instead

.main-nav a:active {
  // instead of existing
  outline: 1px solid white
}

outline doesn't "take" any space

Use shadows

.main-nav a:active {
  // instead of existing
  box-shadow: inset 0px 0px 0px 1px white
}

Same as outline

my entire website shakes when i click on a link and a border is displayed

4 Answers4