VPF::Помогите с margin: 1px. FF vs. IE - по разному

linuxoid

Дата 7.12.2010, 22:47 (ссылка)

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

Загрузка ...

Бывалый

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

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

Здравствуйте, друзья! Объясните, пожалуйста, как добиться одинакового изображения в FF и IE. Здесь ключевая проблема с margin: 1px; В IE вообще нет никакого margin'a сверху, в FF есть. В IE input тэг учитывает margin слева (1px - тот самый margin, который задан для контейнера), а в FF нет.

P.S. в приложении наглядный скрин (IE vs. FF).

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <div id="nl">
            <div class="input"><input type="text" name="nl" value="" /></div>
            <div class="top">Test</div>
            <div class="text">Test text:</div>
            <div class="field"></div>
        </div>
    </body>
</html>

Код


#nl
{
    width:195px;
    height: 112px;
    border: 1px solid #8bad07;
}

#nl .top
{
    height:21px;
    background-color: 000;
    display:block;
    margin:1px;

    font-family: arial;
    font-weight: bold;
    font-size: 14px;
    line-height: 21px;
    color: #fff;
    padding-left: 9px;
}

#nl .text
{
    font-family: tahoma;
    font-weight: 500;
    font-size: 11px;

    margin-left: 10px;
    margin-top: 10px;
}

#nl input
{
    font-family: tahoma;
    font-size: 11px;
    width: 172px;

    background-color:transparent;
    border:1px solid;
}

#nl .input
{
    position: absolute;
    margin-top: 55px;
}

#nl .field
{
    width: 173px;
    height: 22px;

    margin-left: 10px;
    margin-top: 10px;
}

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

Присоединённый файл ( Кол-во скачиваний: 8 )

ffie.png 2,71 Kb

supercelt

Дата 7.12.2010, 23:15 (ссылка)

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

Загрузка ...

Опытный

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

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

Что-то я не замечаю отступа от левого края у <div class="input">

linuxoid

Дата 7.12.2010, 23:54 (ссылка)

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

Загрузка ...

Бывалый

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

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

В данном конкретном коде сверху появляется отступ 1px в IE, в FF нет. Поэтому, если сделать, как ты сказал, то получится, что в IE теперь отступ будет = 2px, а в FF -> 1px.

Rayled

Дата 8.12.2010, 10:30 (ссылка)

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

Загрузка ...

Шустрый

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

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

linuxoid, у вас в примере установлен такой доктайп, при котором каждый браузер сам себе режиссер (quirk mode). Если вы хотите использовать переходный синтаксис, то лучше указать так:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

В этом случае браузеры будут вести себя более одинаково. И что касается именно вашего примера, то при данном доктайпе вам уже можно будет указать левый марджин для class=input и будет одинаково. Да и еще, у вас там в одном месте в background-color ошибка, решетку перед цветом забыли поставить.

FightInGlory

Дата 8.12.2010, 11:01 (ссылка)

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

Загрузка ...

Шустрый

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

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

Старайтесь не делать так, это может не понять не только IE но и семейство webkit, кроме того, в них может появиться большой отступ или даже скролл. Все банально просто, уберите margin и поставьте #nl padding.

linuxoid

Дата 10.12.2010, 17:35 (ссылка)

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

Загрузка ...

Бывалый

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

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

Ок, спасибо!

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