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


#1

WIth the new tweet button my site is now showing an horizontal scroll bar.

Twitter shouldn’t be forcing me to modify my site, or the css because they implemented something new.

But anyways, what’s this: http://platform.twitter.com/widgets/hub.html and why is it causing my site to show an horizontal scroll bar.

Any idea how to fix it?


#2

Can you share the HTML you used to place the button on your site? Did you do any special customizations to squeeze it in?


#3

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/


#4

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.


#5

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.


#6

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


#7

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.


#8

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


#9

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


#10

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


#11

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.


#12

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;


#13

Thanks for the thread – indeed, adding the following to CSS helped:

#twttrHubFrame { left: -9999em; }


#14

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


#15

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


#16

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


#17

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


#18

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


#19

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???


#20

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; }