css code reverses display order of icons

[Travercraig]

For some reason these social media icons ordering have been reversed when I add css to them in the footer. They should be in this order: (same as the html) starting with youtube - twitch - twitter - facebook. But as you can see from this fiddle it goes backwards starting with facebook, I'll provide the HTML and CSS as well.

<footer>                                                <p>Created By © GR412 2015</p>                                                                                                                   <a href="https://www.youtube.com/user/GR412" target="_blank">      <img src="images/CRAFT412 - YouTube Button.png" alt="YOUTUBE ICON"></a>                                                                                                                                                                      <a href="http://www.twitch.tv/gr412" target="_blank">      <img src="images/CRAFT412 - Twitch Button.png" alt="TWITCH ICON"></a>                                                                                                                                         <a href="https://twitter.com/GR412" target="_blank">      <img src="images/CRAFT412 - Twitter Button.png" alt="TWITTER ICON"></a>                                                                                                                                        <a href="https://www.facebook.com/GR412" target="_blank">      <img src="images/CRAFT412 - Facebook Button.png" alt="FACEBOOOK ICON"></a>                                                                                                                                                                                                                                   </footer>

footer {height: 45px;        background: white;        margin: 20px 0 20px 0;        border-radius: 5px;        box-shadow: 0px 1px 3px 0px;        color: #BDBDBD;        line-height: 45px;        position: relative;}footer p {line-height: 45px;          display: inline-block;}footer img {float: right;            margin: 0 5px 0 5px;}footer img:hover {transition: all 0.5s ease;	          border-bottom: 3px solid #C62828;}

[Ciccioo]

footer img {float: right;

that's it.

the first element is put there, on the right. then the second element is put there, but the rightmost place is occupied so it just sits next to it, and so on.

to solve this, put the links in a container and float the container instead of the links.

[Travercraig]

that's it.

the first element is put there, on the right. then the second element is put there, but the rightmost place is occupied so it just sits next to it, and so on.

to solve this, put the links in a container and float the container instead of the links.

That fixes the issue but a new one arises. Here is a fiddle so you can see the code I added. However this now happens when I hover over the icons. They move. 

[Ciccioo]

That fixes the issue but a new one arises. Here is a fiddle so you can see the code I added. However this now happens when I hover over the icons. They move. 

hm, i didn't expect that

 

apparently, you can work around that by using either vertical align or float on the links

[colonel_mortis]

That fixes the issue but a new one arises. Here is a fiddle so you can see the code I added. However this now happens when I hover over the icons. They move. 

If you give the images a height and then add some padding to them while not hovered, then have 3px less padding when hovered, it should work.

Also, you might want to move your transition rule to the un-hovered version so it transitions while showing and while hiding, rather than just hiding immediately.

Your CSS would look something like this:

#social-container img {    height: 39px;    padding: 3px; /*That means 3px on the top, bottom, left and right*/    transition: all 0.5s ease;}#social-container img:hover {    padding-bottom: 0;    border-bottom: 3px solid #C62828;}

I feel like there should be a more elegant solution, but that way should probably work for you.

 

Also, you might want to set the footer p to display: inline rather than inline-block

[Travercraig]

If you give the images a height and then add some padding to them while not hovered, then have 3px less padding when hovered, it should work.

Also, you might want to move your transition rule to the un-hovered version so it transitions while showing and while hiding, rather than just hiding immediately.

Your CSS would look something like this:

#social-container img {    height: 39px;    padding: 3px; /*That means 3px on the top, bottom, left and right*/    transition: all 0.5s ease;}#social-container img:hover {    padding-bottom: 0;    border-bottom: 3px solid #C62828;}

I feel like there should be a more elegant solution, but that way should probably work for you.

 

Also, you might want to set the footer p to display: inline rather than inline-block

It nearly works It now only twitches a little bit. I've played around different height and padding settings and it still seems to do it a bit. Although it is an improvement on what I had before. 

[Travercraig]

hm, i didn't expect that

 

apparently, you can work around that by using either vertical align or float on the links

The float left on the a container seems to work. Not sure how that logic works. But somehow it does lol.

[Travercraig]

If you give the images a height and then add some padding to them while not hovered, then have 3px less padding when hovered, it should work.

Also, you might want to move your transition rule to the un-hovered version so it transitions while showing and while hiding, rather than just hiding immediately.

Your CSS would look something like this:

#social-container img {    height: 39px;    padding: 3px; /*That means 3px on the top, bottom, left and right*/    transition: all 0.5s ease;}#social-container img:hover {    padding-bottom: 0;    border-bottom: 3px solid #C62828;}

I feel like there should be a more elegant solution, but that way should probably work for you.

 

Also, you might want to set the footer p to display: inline rather than inline-block

The other guys float solution seems to work but you also helped a bit with some of the other things you suggested like the padding 0, my thanks. 

[Ciccioo]

The float left on the a container seems to work. Not sure how that logic works. But somehow it does lol.

i don't even know why it didn't work in the first place but hey cool ok

[Travercraig]

If you give the images a height and then add some padding to them while not hovered, then have 3px less padding when hovered, it should work.

Also, you might want to move your transition rule to the un-hovered version so it transitions while showing and while hiding, rather than just hiding immediately.

Your CSS would look something like this:

#social-container img {    height: 39px;    padding: 3px; /*That means 3px on the top, bottom, left and right*/    transition: all 0.5s ease;}#social-container img:hover {    padding-bottom: 0;    border-bottom: 3px solid #C62828;}

I feel like there should be a more elegant solution, but that way should probably work for you.

 

Also, you might want to set the footer p to display: inline rather than inline-block

Another thing about the hover, I did move the transition to the normal img but it still instantly hides when I hover the mouse away.