VPF::DIV отображается по разному во всех браузерах

Royan

Дата 23.11.2008, 21:07 (ссылка)

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

Загрузка ...

Dreamer

Профиль
Группа: Участник Клуба
Сообщений: 1708
Регистрация: 14.9.2002
Где: Лондон

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

Первый раз в жизни я, пожалуй, не знаю даже как задать вопрос... проблема в том, что в этот весьма простой с виду кусочек CSS/HTML кода рисуется абсолютно по разному во всех (IE6, FF 3, Opera 9.6, Safari 3) браузерах

Изначально я боролся с тем, что в FF (в отличие от Opera и Safari) оливковый квадратик рисуется (#text) рисуется с отступом в 4 пикселя, почему я так в толк и не взял

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Пример</title>
    <STYLE type="text/css">
    #global {
        width: 550px;
        margin: 0px auto;
        background-color: #E5E5E5;
    }
    
    #box {
        width: 400px;
        border: 1px solid black;
    }
    
    #text {
        padding: 0px 14px 10px 10px;
        background-color: olive;
    }    
    </STYLE>
    </head>
    <body>
        <DIV id="global">
            <INPUT id="box" type="text" />
            <SPAN id="text"></SPAN>
        </DIV>
    </body>
</html>

Но мой самый главный вопрос стоит все же так, допустим оливковый квадратик это кнопка, которая должна быть расположена справа от текстового поля (#box) как сделать так, чтобы эта кнопка располагалась на той же высоте, что и текстовое поле и была сдвинута вправо на 5 пикселей? Хотелось бы чтобы это все работало во всех 4-х браузерах, если это невозможно, пожалуйста так и скажите

PS
Ширина и высота кнопки может разниться у меня все равно background-color будет прозрачным

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

Открыта вакансия Junior Java Developer'а в нашем лондонском офисе, подробнее можно узнать здесь

ksnk

Дата 23.11.2008, 21:56 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Ну, дык! Оливковый квадратик - inline элемент. Его параметры - высота/ширина должны бы по уму игнорироваться и браться из шрифтовых настроек. Как, вот IE и делает smile

Если хочется сделать его одинаковой высоты - нужно делать его блочным и размещать корректно после инпута.
Как - нибудь так

Код


    #box {
        width: 400px; float:left;
        border: 1px solid black;
    }
    
    #text {
          width:20px;float:left;
          margin-left:4px;
        background-color: olive;
    }

Добавлено через 1 минуту и 8 секунд
Если добавить определение height:XXpx для квадратика - размеры будут одинаковыми во всех броузерах

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

webster

Дата 23.11.2008, 22:17 (ссылка)

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

Загрузка ...

Опытный

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

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

Или же поставить их в одну строчку:

Код


<form action="#" method="post">
<fieldset>
<span>
 <INPUT id="box" type="text" /><INPUT id="button" type="submit" />
</span>
</fieldset>
</form>

Код


input {
vertical-align: middle;
}
#box {
margin-right: 5px;
}

А кнопку уже можно раскрашивать бэкгроундом как угодно, удалив ее стандартный border: 0px none;

Royan

Дата 23.11.2008, 22:48 (ссылка)

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

Загрузка ...

Dreamer

Профиль
Группа: Участник Клуба
Сообщений: 1708
Регистрация: 14.9.2002
Где: Лондон

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

Цитата(ksnk @ 23.11.2008, 18:56

)

Если хочется сделать его одинаковой высоты - нужно делать его блочным и размещать корректно после инпута.

Если его сделать блочным он съедет вниз, а мне нужно, чтобы он был строго справа

Не поверите, только что решил смешать все вместе и добавить табличку и все получилось, причем одинаково во всех!!! браузерах, фантастика...

Добавлено через 35 секунд
Всем большое спасибо за участие!

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

Открыта вакансия Junior Java Developer'а в нашем лондонском офисе, подробнее можно узнать здесь

ksnk

Дата 24.11.2008, 00:39 (ссылка)

(голосов:1)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Цитата

смешать все вместе и добавить табличку

Таблицы рулят! Я давно это знал smile

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

APro

Дата 2.12.2008, 18:06 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата(ksnk @ 24.11.2008, 00:39

)

Таблицы рулят! Я давно это знал

не всегда

есть свои плюсы и минусы smile

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

Никогда не спорь с дураком, другие могут не заметить между вами разницы.
Чем реже открываешь рот, тем меньше слышишь глупостей.

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