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 byclear: left;
It will make this block to always be under the logo. - make
.fb_iframe_widget
a block element bydisplay: block;
(right now - it isinline-block
). It will automatically give it the width of the parent element (303px) - make the following selector
.fb_iframe_widget iframe
and addmax-width: 100%;
to it. These styles will make sure theiframe
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;
}