This is just a memo as to how I finally fixed a display error on the Holy Moly website. Something I did recently, probably related to social plugins, caused the body to overflow to the right. There were big scroll bars at the bottom, and it looked terrible.
Tl;dr: the width in a Facebook Connect button I was using was set to 450px, but I was using it in a 200px sidebar.
My family members (except for my husband David) should stop reading here.
I suppose FB assumed nobody would put that button in a narrow block element, but I copied the code from the church newsletter email, which uses it in a wide letterbox field.
Using a Firefox CSS tool I could see which block elements were pushing right, but neither of us could spot anything obvious in source code or stylesheet.
Days or weeks go by, and people at church liked some other changes. Meanwhile, I kept fretting about that damn scrollbar.
Finally, finally tonight I started thinking logically. It was probably something in the right sidebar, which affected other elements that contained it. The CSS tool showed which elements were behaving, and which weren’t.
At first, thought I’d try turning plugins off, one by one. But then the highlighting tool found a too-wide element that seemed to reside in a widget.
Huh. At that moment I was “logged in as page” and realized that the field where the Like/Share counters sit was overflowing to the right. It was displaying “You must log in as (yourself) to use this social plugin” with a white background of seemingly infinite width.
Sure enough, when I looked at the widget code, it showed a width of 450px.
Changed it to 150px, which shows the Like/Share buttons with room to spare, once you log in to Facebook as yourself. It won’t display the “you must login as” message unless its a deal breaking 400px wide.
Eh, I’ll see what I can do with text in a background image to the effect that “you must switch from Page ID to use.”
That can wait. Tonight, we celebrate.
Detail of plugin showing correct width to fit is 150
White background doesn’t overflow
After ID switch, social buttons display.
More work to be done. That is all.