CSS hover border makes inline elements adjust slig

Question

I have an unordered list full or anchors. I have a CSS :Hover event that adds borders to it but all the anchors to the left slightly adjust when i hover because it is adding 1px to the width and auto adjusting. how do i make sure the positioning is absolute?

I made a JS Fiddle here.

Answer 1

You can also use outline, which won't affect the width i.e. so no "jump" effect. However, unfortunately, you cannot make an outline rounded.

Answer 2

You could use a box shadow, rather than a border for this sort of functionality.

This works because your shadow doesn't 'take size in the DOM', and so won't affect the positioning, unlike that of a border.

Try using a declaration like

box-shadow:0 0 1px 1px #102447;

instead of your

border:1px solid #102447;

on your hover state.

Below is a quick demo of this in action:

DEMO

#homeheader a:visited,
#homeheader a {
  text-decoration: none;
  color: black;
  margin-right: 5px;
}
#homeheader a:hover {
  background-color: #D0DDF2;
  border-radius: 5px;
  box-shadow: 0 0 1px #102447;
}
#homeheader li {
  padding: 0;
  margin: 0px 10px;
  display: inline;
  font-size: 1em;
}

<div id="homecontainer">
  <div id="homeheader">
    <ul>
      <li><a href="#">this</a>
      </li>
      <li><a href="#">that</a>
      </li>
      <li><a href="#">this again</a>
      </li>
      <li><a href="#">that again</a>
      </li>
    </ul>
  </div>
</div>

Answer 3

Add a margin of 1px and remove that margin on hover, so it is replaced by the border.

http://jsfiddle.net/TEUhM/4/

Answer 4

No one has mentioned it here, but the best and simplest solution to this in my opinion is to use "box shadow" instead of borders. The magic is on the "inset" value which allows it be like a boarder.

box-shadow: inset 0 -3px 0 0 red;

You can offset the X or Y to change top/bottom and use -negative value for opposite sides.

.button {
  width: 200px;
  height: 50px;
  padding: auto;
  background-color: grey;
  text-align: center;
}

.button:hover {
  box-shadow: inset 0 -3px 0 0 red;
  background-color: lightgrey;
}

<div class="button"> Button </div>

Answer 5

The easiest method I found was using 'outline' instead of 'border'.

#home:hover{
outline:1px solid white;
}

instead of

#home:hover{
border:1px solid white;
}

Works the best!

https://www.kirupa.com/html5/display_an_outline_instead_of_a_border_hover.htm

Answer 6

The CSS "box-sizing" attribute fixed this problem for me. If you give your element

.class-name {
    box-sizing: border-box; 
}

Then the width of the border is added to the inside of the box when the browser calculates its width. This way when you turn the border style on and off, the size of the element doesn't change (which is what causes the jittering you observed).

This is a new technology, but the support for border-box is pretty consistent. Here is a demo!