Strange CSS behaviour on Chrome for Facebook like box

Question

I am experiencing this strange behaviour on Chrome (I tested both Windows and Linux versions). I also tested it on Firefox but it works properly on that.

I have the Facebook Like Box displaying in a Wordpress side widget. (Its using the official Facebook plugin, although if something is wrong with its output I can easily change it myself). In reality what it does it includes an iFrame.

1. A strange white padding appears underneath the Facebook logo at the bottom of the widget. The strange thing about this is that when I hover over the title, which just changes its colour, the box suddenly adjusts the height to the correct one automatically. You can see it here where the Facebook Like Box widget on the right (3rd box from top) has some white padding. Move the mouse over the 'Like Us?' title and it suddenly adjusts the height to the correct one.

2. A more serious issue occurs when the user navigates to another page, and back to the page. With the page open put another URL in the address bar, such as www.google.com. After it loads just click the 'Back' button of the Chrome browser. You will suddenly see that the Facebook Like Box does not render as before, but it renders in a much shallower box, and ugly scrollbars appear.

What is the reason for this happening? Its the first time I am encountering these strange issues that occur on seemingly unrelated behaviour (hovering a link and clicking back)

Answer 1

As far as I can see, in your servicebox box (that contains the like box) you have a div with a class of serviceheading that has float: left;. I guess this may cause you troubles because the servicebox itself does not have any properties to contain floats. You may try adding a clearfix solution to .servicebox or try adding overflow: hidden; as a quick fix. This may solve your first issue.

As far as the second issue is concerned. I would try adding some properties to check if they help.

• make .fb_iframe_widget clear the floating logo by clear: left; It will make this block to always be under the logo.
• make .fb_iframe_widget a block element by display: block; (right now - it is inline-block). It will automatically give it the width of the parent element (303px)
• make the following selector .fb_iframe_widget iframe and add max-width: 100%; to it. These styles will make sure the iframe does not get bigger - so the scrolling buttons will probably disappear.

Hope it will help.

UPDATE

For some reason when the back button is pressed the <span> inside the .fb_iframe_widget was getting set to height and width of 0px. The following solves the issue, although its a bit of hack and the height and width had to be hardcoded:

.fb_iframe_widget iframe
{
    height: 230px !important;
    width: 300px !important;    
}

.fb_iframe_widget span
{
    height: 230px !important;
    width: 300px !important;    
}