[Plugin: Simple Facebook Connect] iframe's position:absolute throws box out div

  • fungusw

    (@fungusw)


    12 years ago

    Good day; I have installed and configured SFC in order to use the fan box on a site. I’ve used the widget in a column (33.3% width and floated right) (the site is rtl).

    It looks good on FF, Opera, Chrome. Haven’t tested on Windows or IE… yet.
    I have a problem with Safari:

    The FB fan box is outside the column. With the developer tools, I narrowed it down to the iframe. The iframe gets a position: absolute, as far as I know, directly from Facebook. I didn’t see no way to modify this from Otto’s plugin files, nor override it with my css files.

    Deselecting the position: absolute from Safari’s Web inspector tools puts the fan box back into place.

    I tried adding position: relative to elements preceding the faceboox fan box without any luck.

    I am considering finding a way to conditionally change the iframe’s positioning only for Safari with JS; but I am not sure this is the best solution, I might simply have a conflicting style somewhere above the fan box.

    Has this behavior happened to anyone?

    The site (still in beta) is civichub.net.
    Any direction would be appreciated.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter fungusw

    (@fungusw)

    12 years ago

    Failed attempt to force a change from position:absolute to position:relative with js:

    function changeElementPosition() {
var yo = document.getElementByTagName("iframe");
yo.style.position = "relative";
}

    Was considering feeding this to only Safari, had it worked, while looking for a better solution. It did not, and I am wondering if it has to do with the iframe being buried in the fb:fan tag (I can only see and somewhat manipulate the iframe inside with devtools on safari or firebug).

    Looking at my plugins now, I only have Events Manager displaying things on that page, and WP Polls installed but still unused. I’ll try to deactivate them and watch for changes. I’ll update this soon.

    Thread Starter fungusw

    (@fungusw)

    12 years ago

    As quite a few iframes get generated by the SFC plugin, I tried to getElementByID.
    Trouble is the iframe’s ID changes each time it’s loaded.

    Again, it seems to only happen in Safari (Mac), and deselecting the position: absolute; style from the iframe resolves the problem. The problem is I can’t change that style as it’s generated by Facebook.

    The problem is the FB Fan box is displayed outside the column it’s intended to sit in. The box, on the other hand, is correctly displayed on FF, Chrome, Opera (Mac).

    If anybody encountered this behavior, thanks to let me know your thoughts.

    Thread Starter fungusw

    (@fungusw)

    12 years ago

    Ok, I am monologuing a bit here, I’ll just use this thread as a personal diary of my adventures with the facebook iframe position absolute 🙂

    I noticed that leaving position:absolute AND adding right:0 or left:0 also puts the iframe correctly in place.

    Is there ANY way at all I can edit or modify the facebook iframe styles? perhaps from FB developers?

    Thread Starter fungusw

    (@fungusw)

    12 years ago

    Update:

    – I Deactivated Simple Facebook Connect
    – I installed manually the like button as xfbml
    > Same problem

    – I ended up installing the iframe code, things got into place. Got to see how it plays with avatars 🙂

    philusha1983

    (@philusha1983)

    11 years, 10 months ago

    got solution:

    try to write specified class in the CSS for the div that holds the facebook element.
    exmp:

    ‘.classname something something li iframe {position: relative;}’

    good luck

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Plugin: Simple Facebook Connect] iframe's position:absolute throws box out div’ is closed to new replies.