Как сделать одинаковые поля в другом браузере? UL поля - PullRequest
Новая
       4

Как сделать одинаковые поля в другом браузере? UL поля

1 голос
/ 17 января 2010

Поля элемента UL одинаковые, но Firefox и IE показывают разные.

alt text

alt text

ПОЛНЫЙ КОД: 

    <html>
    <head>
        <style>
            body
            {
                background-color: Red;
            }
            ul
            {
                font-family: Verdana;
                font-size: 8pt;
            }
            ul a
            {
                text-decoration: none;
                color: Black;
            }
            ul a:hover
            {
                text-decoration: underline;
            }
            table
            {
                background-color: Transparent;
                border-collapse: collapse;
            }
            table tr td
            {
                vertical-align: top;
                text-align: left;
                font: Verdana, Geneva, sans-serif;
                font-size: 12px;
            }
            #tblYayinAkisi
            {
                border: 1px white solid;
                background-color: #222222;
                font-family: Verdana;
                color: #ffffff;
                vertical-align: middle;
                font-size: 10pt;
                width: 100%;
            }
            #tblYayinAkisi th
            {
                background-color: Transparent;
                background-image: url(../images/bckSiyahGriTram.png);
                background-repeat: repeat-x;
                height: 20px;
                padding-left: 10px;
            }
            #tblYayinAkisi td
            {
                background-color: #222222;
            }
            #tblYayinAkisi td ul
            {
                border: 1px white solid;
                width: 100%;
                margin-left: 10px;
            }
            #tblYayinAkisi td ul li
            {
                clear: both;
                padding-top: 7px;
                list-style: none;
            }
            #tblYayinAkisi td ul li b
            {
                margin-right: 10px;
                float: left;
            }
            #tblYayinAkisi td ul li a
            {
                color: #ffffff;
                float: left;
            }
        </style>
    </head>
    <body>
        <table id="tblYayinAkisi">
            <tbody>
                <tr>
                    <th>
                        YABAN'da bugün
                    </th>
                </tr>
                <tr>
                    <td>
                        <ul>
                            <li><b>00:00</b><a target="_blank" href="programlar.aspx?id=24">TROFE ODASI</a></li>
                            <li><b>01:00</b><a target="_blank" href="programlar.aspx?id=17">YERLİ YABAN</a></li>
                            <li><b>01:30</b><a target="_blank" href="programlar.aspx?id=16">HEDEF</a></li>
                            <li><b>02:00</b><a target="_blank" href="programlar.aspx?id=28">İZCİ</a></li>
                            <li><b>02:30</b><a target="_blank" href="programlar.aspx?id=4">KUŞLAR</a></li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="text-align: center;">
                            <img src="images/canliYayin.png" />
                            <img src="images/tumAkis.png" />
                        </div>
                        <br />
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

Ответы [ 2 ]

2 голосов
/ 17 января 2010

Добавьте это в ваше первое ul объявление: 

ul { padding: 0; margin: 0; list-style: none }

Вам нужно будет настроить другое объявление ul (т.е. margin-left: 10px) в соответствии с вашими потребностями, но это правило обнулит различия.

Причина в том, что каждый браузер использует различные комбинации padding и margin для отступа ul. Обнуляя оба и устанавливая только один (то есть padding или margin), вы можете поддерживать согласованность дисплея.

Кроме того, вам необходимо использовать действительный DOCTYPE в вашем коде, чтобы современные браузеры не возвращались в режим Quirks. Примерно так происходит в самом верху вашего HTML-файла с НИЧЕГО перед ним: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
0 голосов
/ 17 января 2010

Вам также необходимо установить padding на ul. Э.Г. 

ul {
    padding: 0;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...