Why do my links move themselves on click? (GIF included)

Question

This is the problem:

Problem

After a lot of time diagnosing the problem I know what aspect of my CSS is causing this:

.nav a {
        margin: 10%;
    }

BUT WHY?! w3schools says that margins with a % value "Specify a margin in percent of the width of the containing element".

The containing element has the following CSS:

.nav li {
        margin-left: .65em;
        margin-right: .65em;
    }

I also commented all of the JavaScript out, so I know its not that....

Any clues are appreciated :-)

EDIT Steven Parker and Ben Attenborough thank you for your comments, here is the code pen:

http://codepen.io/anon/pen/RrLdNX

Line 203 of the CSS is the above mentioned problem (under a media query so make sure you use the middle Editor Layout in Codepen). I am only using hover states on the li items (as far as I can see/remember).

Answer 1 · 2016-01-17T18:02:53Z

January 17, 2016 6:02pm

I was intrigued, so I did a little experimenting. I was able to reproduce your results using this CSS:

style.css

ul.nav {
  display: flex;
  justify-content: flex-end;
}
.nav li {
  list-style: none;
  margin: 0 .65em;
}
.nav a {
  margin: 10%;
}

and this HTML:

code.html

  <ul class="nav">
    <li><a href="#">Typography</a></li>
    <li><a href="#">Button</a></li>
    <li><a href="#">Form</a></li>
    <li><a href="#">Images</a></li>
    <li><a href="#">Grid</a></li>
    <li><a href="#">Navigation</a></li>
  </ul>

I noticed that the initial spacing of the elements is wrong. Clicking causes the spacing to become correct (sometimes only after multiple clicks!), but I'm not sure why. However, the main concern is why is it displayed wrong to start with.

A percentage margin is calculated on the size of the parent element, in this case a flex item, which has a size and position resulting from another calculation. I'm guessing the actual displayed size has to do with the order in which the calculations are done, and this may be altered somewhat during the operations performed on a click.

I also noticed that when the sizes are wrong, the anchor content actually overflows the list item. You can see this if you add overflow:hidden; to the list items. This leads me to think that the margin on the anchor is being overlooked when the size of the list item is being calculated.

I'm leaning towards this being an internal bug in the CSS, but I have to admit that the concept of having the total size of an element and margins dependent on the size of a parent which sizes itself to wrap its contents, is a tough task for the CSS to handle in any case.

In practice, I would resolve this by setting the margin exclusively in the list item, completely avoiding any order-dependent or recursive calculations.

Answer 2 · 2016-01-17T17:08:08Z

January 17, 2016 5:08pm

Are you using any hover states, looks like the elements change when you hover over them.

Also seeing the html markup would help. It looks like you are mixing selectors a bit. Try targeting the li item OR the link but not both.

Welcome to the Treehouse Community

Looking to learn something new?

jsdevtom

jsdevtom

Why do my links move themselves on click? (GIF included)

Steven Parker

Steven Parker

2 Answers

Steven Parker

Steven Parker

jsdevtom

jsdevtom

Ben Attenborough

Ben Attenborough