(IE bug in Facebook Iframes; Scrollbar bug) Need help to fix my html/css button

**msk1** · Feb 22, 2013 14:02

The code works fine in JSFIDDLE, both in Mozilla and IE, but when I paste this code in my facebook iFrames tab, I get crazy scroll down in IE/Chrome (Mozilla works fine just like in JSFIDDLE).

Can you help me to fix it, please?

iFrames in facebook is just an app that let you paste any content (HTML,CSS,Java) that will be surrounded by facebook frame. Look at the screenshots below:

http://i.imgur.com/vn8PCP5.jpg

http://i.imgur.com/xyReKvK.jpg

JSFIDDLE Link
http://jsfiddle.net/cRqhT/127/

The same code in Facebook iFrames
http://www.facebook.com/podstrigis/app_201742856511228

HTML

Code:

<html>
    <body>
        <div>
<a id="button" href="http://mysite.com"></a>
            </div>
        </body>
    </html>

CSS

Code:

div {
    width: 810px;
    height: 810px;
    background: url('https://gator1174.hostgator.com/~mskparik/facebook/thx.jpg')
}

#button{
  display: block;
    width: 204px;
    height: 116px;
    background: url(https://gator1174.hostgator.com/~mskparik/facebook/111.png) no-repeat top left;
    position: absolute;
    top: 70%;
    left:5%;
}
#button:hover {
    background: url(https://gator1174.hostgator.com/~mskparik/facebook/222.png) no-repeat top;
    }