4

I was trying to add twitter/facebook icon to the site footer, much like side.cr footer. I got everything working, except that safari having unexpected vertical tile for twitter and facebook. I tried to upload screenshot but I am new user, so can't do that right now.

So I was searching for the answer and found this q/a here, Is <img> element block level or inline level?

So I went to side.cr again to see its css does have user agent stylesheet.

I added this line of code to my css:

.footer ul li img.t, li img.f {
    width: 40px;
    vertical-align: middle;
    display: inline-block;
}

and it fixed the problem.

But I have a few questions in head:

  1. why does side.cr's css show as non-editable user agent, while I have to add that display-inline to my css?
  2. How does "display: inline-block" fix the problem?

Notice that: When mouse over to the gray twitter, it triggers swap.js, changing the icon image to the colored one, but in safari, the highlighted icon is bigger than the gray one. I think i almost know the answer. Just need someone who knows all the kinks behind this.

Thanks!

Community
  • 1
  • 1
Grant Guo
  • 41
  • 3

1 Answers1

1

Solution: To fix this problem make sure you set the height and width on the image so that it doesn't change during loading.

<img src="http://www.side.cr/images/contact/twitter_off.svg"
     class="twitter_bird img_swap" height="52px" width="52px" />

or

.twitter_bird {
    height:50px;
    width:50px
}

Explanation: When you switch the images name, safari begins to load the image but it doesn't know the height or width until it's done downloading. If you set the height and width it will not grow from 0px to 52px.

EminezArtus
  • 1,102
  • 9
  • 12