Adding image links bumps down all links

[ErikAGriffin]

I have this sticky footer formatted how I would like it, however upon adding a link that is an image, it messes up. All of the links in the footer bump down, add a scrollbar to the page and cause the page to extend beyond the footer. If you remove that link, you will see it working as intended. What is happening here?

http://codepen.io/ErikAGriffin/pen/xGGyRx?editors=110

[Paulie_D]

It looks to me as though you have the scrollbar regardless….look what happens if you comment out the links.

http://codepen.io/Paulie-D/pen/OVVBjO

[Paulie_D]

Then again, I think it’s the top padding on the footer combined with the height.

If you make the height 42px and remove the padding it seems to work.

http://codepen.io/Paulie-D/pen/QbbZaV

[ErikAGriffin]

@Paulie_D Your first codepen doesn’t just comment out the links, it changed the height in footer, main:after to 42 (from 32). The original had a height of 32 and padding of 10px, and does not have a scrollbar if you comment out the image link.

The goal is to have the normal links centered vertically in the footer, and also have that image link there. Your last example without the padding has no scrollbar (as my first example does if you comment out the image link only), but the links are sitting closer to the bottom.

Also I am curious as to what causes the links to be pushed down by adding the image link.

Here is my pen with the image link commented out:
http://codepen.io/ErikAGriffin/pen/xGGyRx

[Paulie_D]

Hmm…lets try that again

http://codepen.io/Paulie-D/pen/aOOXGO

[ErikAGriffin]

That looks good, thanks! I really need to study up on the different display properties.

[Author]

Posts