VPF::[HTML,CSS] Кнопка улетает вниз в IE/Chrome

msk1

Дата 22.2.2013, 22:26 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 20.2.2013

Репутация: нет
Всего: нет

Код нормально отображается при его вставке в JSFIDDLE и в Мозилле, и в IE.
http://jsfiddle.net/cRqhT/127/

(iFrames - это приложение, которое позволяет вставить любой HTML-CSS-Java код на страничке, который будет окружен рамкой фейсбука - сайт в сайте)

Когда я тот же самый код пытаюсь вставить в iFrames в Facebook, то в Мозилле он нормально отображается, а в IE/Chrome scrollbar вниз улетает куда-то
(iFrames - это приложение, которое позволяет вставить любой HTML-CSS-Java код на страничке, который будет окружен рамкой фейсбука - сайт в сайте)

http://www.facebook.com/podstrigis/app_201742856511228

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

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

Есть соображения как это исправить?

Спасибо!

HTML

Код


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

CSS

Код


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;
    }

Arantir

Дата 22.2.2013, 22:51 (ссылка)

(нет голосов)

Загрузка ...

Рыбак без удочки

Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 5
Всего: 55

А вы уверены, что правильно код во фрейм поместили? Там очень забавный исходник в нем:

Код


<html>
    <script type="text/javascript">var NREUMQ=NREUMQ||[];NREUMQ.push(["mark","firstbyte",new Date().getTime()]);</script><body>
        <div>
            <style>
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;
    position: absolute;
    top: 35%;
    left:10%;
}
#button:hover {
    background: url(https://gator1174.hostgator.com/~mskparik/facebook/222.png) no-repeat top;
}

</style>
            <a id="button" href="http://mysite.com"></a>
        </div>
    <script type="text/javascript">if (!NREUMQ.f) { NREUMQ.f=function() {
NREUMQ.push(["load",new Date().getTime()]);
var e=document.createElement("script");
e.type="text/javascript";
e.src=(("http:"===document.location.protocol)?"http:":"https:") + "//" +
  "d1ros97qkrwjf5.cloudfront.net/42/eum/rum.js";
document.body.appendChild(e);
if(NREUMQ.a)NREUMQ.a();
};
NREUMQ.a=window.onload;window.onload=NREUMQ.f;
};
NREUMQ.push(["nrfj","beacon-4.newrelic.com","4aa22b4d0a",1170069,"dgkNQkINWltUFxpFVVdJFV9DC0JYQw==",1,10,new Date().getTime(),"","","","",""]);</script></body>
</html><!-- no_scrollbars -->
<script>
( function (){var e=window,t=document,n=t.documentElement,r=t.getElementsByTagName("body")[0],i=e.innerWidth||n.clientWidth||r.clientWidth,s=e.innerHeight||n.clientHeight||r.clientHeight,o,u,a,f,l;l=810,o=document.createElement("div"),o.id="fb-root";try{window.document.childNodes[0].appendChild(o)}catch(c){window.document.body.appendChild(o)}return window.fbAsyncInit=function(){var e,t,n,r,i;window.document._thunder_doc_height=e=function(){var e,t,n;return t=document,e=t.body,n=t.documentElement,e&&n?Math.max(Math.max(e.scrollHeight,n.scrollHeight),Math.max(e.offsetHeight,n.offsetHeight),Math.max(e.clientHeight,n.clientHeight)):800},FB.init({appId:"190322544333196",status:!0,cookie:!0,xfbml:!0});if(typeof fbAsyncHooks!="undefined"&&fbAsyncHooks!==null)for(r=0,i=fbAsyncHooks.length;r<i;r++)t=fbAsyncHooks[r],t();return n=function(){var t;return t=e(),FB.Canvas.setSize({width:l,height:t}),setTimeout(n,200)},setTimeout(n,200)},function(){var e;return e=document.createElement("script"),e.async=!0,e.src=document.location.protocol+"//connect.facebook.net/en_US/all.js",document.getElementById("fb-root").appendChild(e)}(),u=document.getElementsByTagName("head")[0],f=document.createElement("style"),a=document.createTextNode("body { position: relative; max-width: "+l+"px!important;width: "+l+"px!important; overflow: hidden!important; margin: 0px!important; }"),f.type="text/css",f.styleSheet?f.styleSheet.cssText=a.nodeValue:f.appendChild(a),u.appendChild(f)} )()
</script>

style внутри div, хотя допускается только в head. Один скрипт перед body "в астрале", а должен быть в head. Другой script вообще за пределами html.

Тут странно, как у FF от такого кода не случилось глюка, а не почему другие браузеры странно это отображают.

Это сообщение отредактировал(а) Arantir - 22.2.2013, 22:51

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

msk1

Дата 22.2.2013, 23:32 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 20.2.2013

Репутация: нет
Всего: нет

Не актуально.

Помогли уже код подправить.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »