CSS: fixing the Twitter tweet button created with an iframe

  • CSS
  • Gabriele Romanato

When you choose to use an iframe for displaying a Twitter tweet button, you might actually be surprised by the weird rendering of your button across browsers. The fact is that, after Twitter decided to change the default style of its buttons, tweet buttons are best rendered with JavaScript, while iframes show some particular problems. First of all, your button will be rendered correctly, but the vertical space occupied by the button is far from being proportional (in fact, it's too high). Another thing is that if you decide to limit the height of the button with the CSS height property, some browsers may display a vertical scrollbar track (e.g. Firefox). Let's see some solutions.

Given the following tweet button:

<iframe class="tweet-b" src="http://platform.twitter.com/widgets/tweet_button.html?url=http://test.com/&text=Test&count=horizontal&via=gabromanato&size=medium"></iframe>

You can specify the following CSS styles:

iframe.tweet-b {
	display: inline-block;
	height: 25px;
	overflow: hidden;
}

If your button has a vertical layout (specified by the count parameter), you need to specify a width as well:

iframe.tweet-b {
	display: inline-block;
	height: 80px;
	width: 85px;
	overflow: hidden;
}

If you don't specify a dimension, in the case of the horizontal layout your button will be too high, while with a vertical layout it will also be too large. The overflow property prevents browser from showing a scrollbar or a scrollbar track.

Back to top