Changed code in Twitter feeds?

For quite a while, I have had a Twitter feed embedded in my website, so that the feed itself was hidden until you hovered over the icon, at which point it would pop up until you moused away from it.

#twitter iframe {display:none;}
#twitter:hover iframe {display:block;}

with other rules in the :hover bit for positioning etc., where <div id="twitter"> contained both the icon and the <script> tag that embedded the Twitterness. This worked well in every browser except IE, which didn’t respect iframe {display:none;}, so I wrapped the whole thing in anti-IE conditional comments, and IE users just had to click on the icon and go through to the Twitter page.

But today I find that other browsers are doing the same thing, and ignoring iframe {display:none;}. I assume this must be a change to the way Twitter is coding the widget, because Opera 12 isn’t going to suddenly have changed its interpretation of the code!

Is anyone else having this problem, and if so, is there a way round it, or will I just have to live with the fact that I can’t have a pop-up Twitter feed any more?

Hello,

Is there any chance we can get a live website to tinker with?

I’ve put a demo page up at http://getdown.org.uk/sitepoint/twitter-problem.htm, which shows the problem with the original code. It used to work fine with the Twitter feed hidden until you hovered over the icon, but now it’s permanently visible, which is not what I want!

Thanks

Stevie,

The twitter iframe is adding a bunch of rules as inline CSS as part of the twitter feed.

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" allowfullscreen="" style="border: none; max-width: 100%; min-width: 180px; margin: 0px; padding: 0px; display: inline-block; position: static; visibility: visible; width: 300px;" title="Twitter Timeline" height="500"></iframe>

As a result, your displays are being overridden by the inline display:inline-block that’s written in the HTML (JS generated I presume.)

Just add !important to both of your #twitter iframe{} rules (regular and hover) and it’ll take precedence over the javascript generated display value.

1 Like

Smashing, thank you. It cropped up on my personal website while I was at work, so I was trying to surreptitiously fiddle with it when no-one was looking, and I’ve just realised that the reason that !important wasn’t working is because I was editing the wrong CSS file … d’oh!

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.