Hub iframe is causing my Site to scroll horizontally. wtf?

ElNacional1 · 2011-12-12T17:16:33.000Z

The HTML and the script are the ones provided by Twitter. I didn’t customize anything.

However, the url its: http://www.elnacional.com.uy/

kurrik · 2011-12-12T21:55:39.000Z

Why do you think this is due to the Twitter widget? It appears that this:

Rey de Copas

Is causing the scrollbar to appear. The parent element is styled to 980px wide, and that element is position: absolute with a right: -180px, causing the page to be extremely wide.

ElNacional1 · 2011-12-13T00:47:52.000Z

No it isn’t. Thank you very much but what it’s causing this it’s the iframe that the script loads right after the body tag.

If you had firebug you could see that the div that wraps the whole page, has 100% width. And the iframe its being placed right next to that div, to the right of it, causing the browser to expand more that 100%. Creating the scrollbar.

That div you are mentioning its contained within another div whos width it’s 100% height it’s fixed and its overflow hidden. So you can have whatever browser width and the div won’t generate an scrollbar.

benward · 2011-12-13T05:29:53.000Z

Hello, I’m one of the developers of our widgets.js file so I took a look into this for you this evening.

Firstly, the hub.html frame is an event passing bridge, allowing the buttons and widgets to communicate events (such as follows and tweets) back to the parent page. That’s why it’s there.

The positioning of the hub frame, however, is purely vertical (negatively positioned above the top of the page. It should not cause any change to any dimensions of your page, and certainly not to your page width.

Could you please follow up with which web browser you’re seeing this issue appear in, and I’ll try to reproduce it again in the same environment as you’re testing.

Thanks,

Ben

ElNacional1 · 2011-12-13T05:51:56.000Z

Firstly, thanks for answering. And thanks for the info.
Yes I know about the top:-9999em and I was confused about what’s happening also. I tried to work my code around this but nothing I could do changed the issue.

I’m on Firefox 8.0, Windows 7.

Ps: I guess, as with every issue, I’m not the only one experiencing it. I suggest adding left: -9999em; too.

Ps2: If there’s any way I could change style of the iframe on my own code I’d appreciate to know.

Again, thank you very much.

Visionexp · 2011-12-15T11:24:46.000Z

absolute;top:-9999em;width:0px;height:0px

ElNacional1 · 2011-12-15T11:31:42.000Z

yeah that would be awesome. but how do I edit the style propierties of the element?

ElNacional1 · 2011-12-19T15:29:15.000Z

This is still happening. I’ve tried to work around it but nothing I try works.

I’m a web developer and just now happend on another site I’m creating (but it’s still at localhost so im not worried yet) .

I know it probably has to do with the way i configure the CSS for my page-wrapper divs, but anyways, it shouldn’t.

I’m beging you to show me a way to edit the Hub CSS without Javascript or just please add left:-9999em to the element style.

Hope to hear from somebody soon,
Santiago

BagleyTech · 2011-12-19T17:56:11.000Z

Without javascript?

That might be a bit of a problem. You could try adding…

#twttrHubFrame { position-left: -9999em; }

to your CSS.

Or you could try to use another scripting language that has access to the dom to modify the element style before or after the page is rendered.

ElNacional1 · 2011-12-20T01:53:23.000Z

Nevermind, I’m an idiot. I didn’t realize I could just do that and set whatever styling I wanted.

ps: left:-9999em; solved it
so would’ve, width:0!important;

svolinsky · 2012-01-07T17:13:37.000Z

Thanks for the thread – indeed, adding the following to CSS helped:
#twttrHubFrame { left: -9999em; }

maorb · 2012-01-29T13:21:20.000Z

I also have this annoying issue, but only on IE7 (yes, I should support this IE version too…).
I tried to add the css to the #twttrHubFrame elemnet, but it is still causing IE7 to horizontally scroll.

Any ideas for that?
Thanks

RenukaIndia · 2012-01-29T18:37:53.000Z

;;;;goa;;;;india;;;;;kolkata;;;;chennai;;;escort model girls-----08013556030

RenukaIndia · 2012-01-29T18:38:42.000Z

goa–india----kolkata—chennai—model escort girls----08013556030

RenukaIndia · 2012-01-29T18:39:46.000Z

goa—india—kolkata—chennai—bollywood model escorts----08013556030

RenukaIndia · 2012-01-29T18:40:39.000Z

goa—india—bollywood model escort girls avilable for fun===08013556030

royston_olivera · 2012-03-06T10:01:00.000Z

I have having the same issue in IE7 … the iframe is getting a width > 2000px causing a horizontal scroll.

It does not happen on all pages. Is it got to do with the styling of containers around it???

MyAmount · 2012-06-06T21:41:20.000Z

Since it’s pushing up already no need to push it off left. Also in my instance there are 2 iframes that needed the attention. This fix works:

#twttrHubFrame, #twttrHubFrameSecure { left:0; }

misr_online · 2012-06-13T12:48:01.000Z

I think you’re the man, I have lost hope for that fix until i saw you comment! Thank you very much

niall · 2016-02-06T23:01:40.636Z