Question

I’m adding a Facebook Like Box on my webpage and have some trouble with sizing. I originally had used the HTML5 and Javascript code from the Facebook Developer site to make a box to my liking but I found that it was slowing my other animations on the page when it was loading.

I decided to then use an iFrame which is perfect and doesn’t slow down any of the other elements of the page onload. To make it look better, I added this code into the iframe:

style="visibility:hidden;" onload="this.style.visibility = 'visible';"

And I’ve also tried:

style="display:none;" onload="this.style.display = 'block';"

which keeps the iframe from making that white flash when it’s loading up (it looks much classier; both codes are giving me the identical problem). Now, though, when the Like Box loads it only loads about 150 pixels in height (although it’s set at 250 pixels for height). When the above code is taken out, the box is sized perfectly and when I put it back in it reverts back.

The interesting thing is that when the visibility code is in and I adjust the width variable, the width of the box changes. When I adjust the height though, it doesn’t change.

Here’s a fiddle I made for it:

http://jsfiddle.net/KWMxb/

Any thoughts? Thanks!

Answer 1

your iframe has two style attributes. Move everything from the second one into the first and it should work.