Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Формы, формы и браузеры


Автор: sdsdsdsd 31.3.2010, 16:16
Есть одна форма которая по разному отображается в Opera и Firefox.

Скрины: 
Firefox, так как мне нужно.
user posted image

Opera.
user posted image

Меня интересует вариант от Firefox, выглядит это лучше. Не могу понять почему Opera отображает по своему, и в какую сторону копать. Подскажите.
Спасибо.

Автор: bars80080 31.3.2010, 19:19
border - бордюры, margin - внешние поля, overflow - скрол

Автор: sdsdsdsd 1.4.2010, 12:21
У меня следующая форма:
Код

<html>
<style type="text/css">
body {
font:12px/18px Arial, Tahoma, Verdana, sans-serif; 
font-style: normal;
font-weight: normal;
}
</style>
<body>
Тут текст<input type="text" name="login" size="11" maxlength="20">&nbsp;&nbsp;тут идет тоже текст<input type="password" name="password" size="12">
<br>
<textarea name="textarea" cols="43" rows="20">TEXT</textarea>
</body>
</html>

Пробывал на ней ваши советы, не вышло, видимо руки кривые. Так же не могу со шрифтами справится, т.е. указать один для всех браузеров. Как видите в стилях стоит, а толку от него ноль, это тоже играет роль т.к. начинает съезжать из-за разных шрифтов.
Покажите, пожалуйста, истину.

Автор: bars80080 1.4.2010, 14:44
ну, код ниже никак не соответствует рисункам. в том числе и в файерфоксе.

Автор: sdsdsdsd 1.4.2010, 15:11
Цитата(bars80080 @ 1.4.2010,  14:44)
ну, код ниже никак не соответствует рисункам. в том числе и в файерфоксе.

Проше прощения, я решил начать с более простой и элементарной формы (код). Со скринами я думаю разберусь когда пойму как сделать это на простом, но вот пока не выходит.

Автор: magelan 7.4.2010, 15:45
Не шибко идеально, но во всяком случае похоже и понятно куда двигаться.
для 6го ослика потребуется писать экспрешен и скрипт, т.к. он с отступами работает иначе, чем мозилаобразные.

Код

<html>
<style type="text/css">
body {
font:12px/18px Arial, Tahoma, sans-serif;
font-style: normal;
font-weight: normal;
}
INPUT.inp {
    font-size: 12px;
    border: 1px solid #CCCCCC;
    margin: 6px 0 6px 5px;
    vertical-align: middle;
    width: 85px;
    outline: none; /* googler active border disable  */
}

INPUT.sbm {
    font-size: 12px;
    border: 1px solid #CCCCCC;
    background: White;
    margin: 6px 0 0 0;
}
TEXTAREA {
    font-family: Arial, Tahoma, sans-serif;
    font-size: 12px;
    border: 1px solid #CCCCCC;
    width: 350px;
    overflow: hidden;
    resize: none; /* googler resize disable  */
    outline: none; /* googler active border disable  */
}
FORM {
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

DIV.formbkg {
    background-color: #EEEEEE;
    padding: 0 10px 10px 10px;
    width: 350px;
    text-align: right;
}


</style>
<body>
<DIV CLASS="formbkg">
<FORM>
Тут текст<input CLASS="inp" type="text" name="login" size="11" maxlength="20">&nbsp; тут идет тоже текст<input CLASS="inp" type="password" name="password" size="12">
<br>
<textarea name="textarea" cols="43" rows="20">TEXT</textarea>
<BR />
<INPUT CLASS="sbm" TYPE="button" VALUE="Отправить" /><BR />
</FORM>
</DIV>
</body>
</html>

Автор: blah 8.4.2010, 12:22
Цитата(magelan @  7.4.2010,  14:45 Найти цитируемый пост)
мозилаобразные.

Это кто?
Цитата(magelan @  7.4.2010,  14:45 Найти цитируемый пост)
для 6го ослика потребуется писать экспрешен и скрипт

Зачем? Кто вам сказал это?

Автор: Violator 8.4.2010, 13:12
magelan, 
Вам бы почитать информацию о режимах рендеринга и доктайпе...

Автор: magelan 8.4.2010, 16:35
Violator не говорите мне, что надо делать...

Всем, тоже мне деятели, неделю ответить человеку не могли куда двигатся, а тут слетелись. 

Я знаю, что не виноват тот, кто ничего не делает.

Автор: dеluxe 9.4.2010, 23:05
sdsdsdsd, мой совет, обнулить что только можно в этой форме и тогда сверстать кросбраузерно. 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)