Почему это не работает в Internet Explorer 9?

#html #css #internet-explorer

#HTML #css #internet-explorer

Вопрос:

Привет, у меня возникли проблемы с этой боковой панелью, которую я пытаюсь создать. Это не выглядит правильно, когда я смотрю на это в interent Explorer.

Вот ссылка, проверьте ее в chrome или firefox, затем посмотрите на нее в IE, чтобы вы могли понять, о чем я говорю. http://sickassvideos.com/player.php?id=1

Вот код, который создает эти боковые панели:

 <div id="social">
                <h3>What we're about... </h3>
                <p>Our mission is to provide you with a continous and reliable stream of sick ass videos.</p>
            </div> <!-- socila -->
            <div id="social">
                <center>
                <table>
                    <tr>
                        <td><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/pages/SickAssVideoscom/123296977742117" width="292" show_faces="false" stream="false" header="true"></fb:like-box></td>
                    </tr>
                </table>
                </center>
            </div> <!-- social -->

            <div id="social">
                <center>
                <table>
                    <tr>
                        <td><img src="/images/logo.jpg" width="60px" height="60px"></td>
                        <td><h2>Coming soon!</h2><p>iPad and iPhone app</p></td>
                    </tr>
                </table>
                </center>
            </div> <!-- social -->
            <div id="social">
                <script type="text/javascript"><!--
                google_ad_client = "ca-pub-1520655484798685";
                /* Small ad */
                google_ad_slot = "2637780657";
                google_ad_width = 200;
                google_ad_height = 200;
                //-->
                </script>
                <script type="text/javascript"
                src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                </script>
            </div>

Вот стиль для id=»social»

 #content div#sidebar {
float: right;
}
#content div#social {
    float: right;
    width: 250px;
    height:;
    padding: 10px 10px;
    margin:0 0 15px 0;
    background: #FFF url() no-repeat;
    /* DROP Shadow 
    -moz-box-shadow: 3px 3px 4px #ccc;
    -webkit-box-shadow: 3px 3px 4px #ccc;
    box-shadow: 3px 3px 4px #ccc;
    */
}

Спасибо, что взглянули.

1. У меня нет IE9, но в IE6 это выглядит как беспорядок, повсюду разделы, весь контент не центрирован (по умолчанию выровнен по правому краю), в Firefox и Safari это выглядит красиво, но я не могу сказать вам, что здесь происходит…

2. RaphaelJS тоже смог привести к сбою IE 9 … ну да ладно, и пользовательский интерфейс IE 9 довольно уродливый. Я думаю, IE 9 предназначен только для того, чтобы команда зарабатывала большие деньги, получала бонусы от MS и налаживала отношения с высшим руководством MS, чтобы они «продвигались» по карьере

3. Сразу же я заметил, что у вас не должно быть нескольких div с одинаковым идентификатором… Редактировать: При ближайшем рассмотрении оказывается, что это наименьшая из ваших проблем. Рассмотрите возможность размещения ваших скриптов внутри реальных html-тегов… Я считаю, что IE9 может отображаться должным образом, если пользователи следуют некоторым базовым стандартам, как и в других браузерах..

4. Я перестал смотреть на вашу проблему, как только началось видео. Это было чертовски забавно.

5. Спасибо всем! Я боялся, что это может произойти, Брент

Ответ №1:

это плохо закодированный css! но проблема с неуместными полями заключается в том, что кнопка facebook like расширяется слишком широко для указанного вами размера поля.

также не размещайте analytics сверху, вы размещаете ее внизу, плюс у вас отсутствует doctype

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>

    <body>
<!--content ect-->

<!--analytics-->
    </body>
    </html>