Формы+Шрифт в разных браузерах

Olegs2 · April 1, 2010

Обычная форма:

<html>
<style type="text/css">
body {
color:#a2a4a3;
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">  тут идет тоже текст<input type="password" name="password" size="12">
<br><br>
<textarea name="textarea" cols="43" rows="20">111111111111111111111111111</textarea>
</body>
</html>

Но у меня возникает две проблемы:

1. Разный шрифт в Opera и Firefox. Хотя как мне кажется я все верно указал. Из-за этого расстояние меняется. Как его верно установить что бы он был везде один?

2. Отображение "бордюра" не совсем как в Firefox, другая форма и цвет. Из-за этого они выглядят не так аккуратно как в Firefox.

3. Колдовство с overflow не помогло узбавиться мне от скрола в Opera.

Мои скрины:

Это Firefox, то что я хочу получить в Opera.

А это Opera.

Спасибо.

Justnewone · April 1, 2010

Укажите размер непосредственно элементам форм.

В опере, кажется, не уберется.

Но попробуйте overflow-x и overflow-y по отдельности.

ShumNo · April 1, 2010

А у меня несколько по другому отображается в FF и Opera этот код. Имею ввиду разные стили, которые использует браузер для отображения input рамочек.

Чтобы убрать скрол в опера можно добавить стиль непосредственно к textarea

Для примера попробовать

<textarea name="textarea" cols="43" rows="20" style="overflow:hidden;">111111111111111111111111111</textarea>

Шрифты у меня одинаковые. И для более точного соответствия текстовых полей по размерам я думаю размер их лучше указывать в пикселях

Olegs2 · April 1, 2010

Укажите размер непосредственно элементам форм.
В опере, кажется, не уберется.
Но попробуйте overflow-x и overflow-y по отдельности.

Дело в том что если начну указывать размеры под Оперу то в Firefox они так же сместятся, даже не знаю как быть, погибаю ( а как хочется что бы они были всегда как в Firefox.

Вопрос со скролом меня пока не так сильно интересует как с первые два.

Спасибо за ответы.

ShumNo, спасибо. скрол убран!

Edited April 1, 2010 by Olegs2

ShumNo · April 1, 2010

Не очень понимаю в чем они разные на скринах ваших выше как по мне так они одинаковые

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

<html>
<style type="text/css">
body {
color:#a2a4a3;
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" style="width: 95px;">  тут идет тоже текст<input type="password" name="password" size="12" style="width: 95px;">
<br><br>
<textarea name="textarea" cols="43" rows="20" style="overflow:hidden; width: 352px;">111111111111111111111111111</textarea>
</body>
</html>

Пиксель он и в африке пиксель не больше не меньше

Olegs2 · April 1, 2010

Спасибо, с размерами форм я справился, стало понятно.

Я понил в чем проблема, в том что я вам показываю. Скрины выше были с одной системы, она была настроена на обработку форм и т.д.

Вот скрин с обычной системы:

Как видим тут у формы не совсем красивый вид, задача сделать формы такие же плоские как на первом скрине, подскажите как это более правильно осуществить.

Спасибо.

Edited April 1, 2010 by Olegs2

ShumNo · April 1, 2010

Стилями конечно.

Добавьте border например к input. Или border поставьте none и добавьте красивый бекграунд и т.д

Sign In

Формы+Шрифт в разных браузерах

Question

Olegs2

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

ShumNo

Link to comment

Share on other sites

Olegs2

Link to comment

Share on other sites

ShumNo

Link to comment

Share on other sites

Olegs2

Link to comment

Share on other sites

ShumNo

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information