Форум hotibo.ru

Dreamer · 09.02.2011 18:02

В общем столкнулся с такой проблемой,
при верстки странице регистрации испытываю большие сложности с одинаковым отображением селектов
во всех браузерах сначала добился что что все нормально отображается в ФФ и ИЕ 6.0
потом решил проверить страницу в Опере и такая штука получается
ширина отличается и высота
если в ФФ 2.0 и ИЕ 6.0 я не прописывал высоту а паддингами отрегулировал и все нормально
то в Опере(проверял версии 8.0,9.0) и ИЕ 5.5 и ниже высота уменьшается как будто игнорирую паддинги.
также с шириной проблемы я задаю ширины при этом не задавая свойтсво size(кстате а обязательно ли это свойтво)
в коде индекса
и имеются отличия то паддинги складываются с шириной то наоборот, в общем бред какой то
пытался использовать имротант, но щапутался там он работает там не работает,
в общем одна надежда что тут кто то подскажет как с таким бороться
Вот код:

Код:

input.bgdark {
background: #000;
border: none;
color: #00fff3;
font-size: 11px;
padding: 7px 0 7px 6px;
vertical-align: middle;
width: 176px;  }
select.bgdark {
background: #000;
border: none;
color: #00fff3;
font-size: 11px;
padding: 7px 0 7px 4px;
vertical-align: middle;
width: 182px !important;
width: 182px;
}

alemiks · #2 09.02.2011 19:04

одинакового отображения можно добиться только эмуляцией select с помощью javascript
http://badboy.ro/articles/2005-07-2 … s_preview/

Отредактированно alemiks (09.02.2011 19:04)

Dreamer · #3 09.02.2011 19:25

alemiks спасибо за совет как нибудь в свободное время разбирусь с этим скриптом,

в данный момент нужен вариант попроще

Аня · #4 09.02.2011 23:06

Кладите код ВЕСЬ. Без него можно только посоветовать установить в качестве основного ослика ИЕ6, а в качестве второго ИЕ7. Но никак не 5.5, он уж вымер.

Dreamer · #5 12.02.2011 18:54

Броузеры    Запросов %
MS Internet Explorer 7.x 147304    11.3
MS Internet Explorer 6.x 792733    60.6
MS Internet Explorer 5.5 5534    0.4
MS Internet Explorer 5.x 13579    1.0

не знаю насколько можно судить что этот браузер вымер, вот смотрел недавно статистику

вот в html

Код:

Имя*:
Email*:
Phone*:
Страна*:
Первые буквы города:
Город*:

Аня · #6 12.02.2011 21:03

А вы уверены, что данные этой статистики говорят о том, что надо использовать IE5.5 вместо IE7? Мне вот обратное видится.

Что-то вы перемудрили слегка. Зачем там паддинги?

br> "http://w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Имя: *
Эл. почта: *
Телефон: *
Страна: *
Первые буквы города:
Страна: *
Ваш комментарий:

Багрепорты принимаются

Мне показалось, что textarea там, где он находится, немного не в том месте расположен. Впрочем, если считаете иначе, можете подвинуть.

Dreamer · #7 14.02.2011 15:21

Аня написал:

А вы уверены, что данные этой статистики говорят о том, что надо использовать IE5.5 вместо IE7? Мне вот обратное видится.

конечно с удовольствием оценил бы другую статистику, эти данные нельзя считать общепринятыми но можно хоть какоето представление иметь
данные взял с bigmir.net украниский трафик то что нужно было для того сайта который я сейчас верстаю так как он ориентирован в основном на украинскую аудиторию.

Спасибо большое вам Аня за помошь.

Аня написал:

Что-то вы перемудрили слегка. Зачем там паддинги?

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

Dreamer · #8 14.02.2011 16:31

Аня написал:

#buttons input {
width: auto;
}
#buttons td {
text-align: center;
padding-top: 1em;
white-space: nowrap;
}

заметил что вы используете такой код для кнопок
я вот делаю так

Код:

.button { border: none; cursor: pointer; font-family: Tahoma, Helvetica, sans-serif; }
.ok {
    background: url(../i/button_ok.gif) top left no-repeat;
    vertical-align: middle;
    font-size: 10px;
    font-family: Tahoma, Helvetica, sans-serif;
    font-weight: bold;
    padding: 4px 0px 8px 0px;
    width: 25px;
}

правда в следствии приходится бороться с разным отображением кнопок в браузерах а имеено с отступами.
Хотелось бы услышать ваше мнение

Аня · #9 14.02.2011 23:46

У меня нет какого-то универсального кода для кнопок. Каждый раз я пишу разные стили, и зависит это от текущей задачи. Например, первое правило вообще относится даже не к оформлению, а к переопределнию заданного всем элементам input свойства width. Я посчитала, что так будет короче, чем вешать на каждый input класс или пользоваться другими методами.

Как видите, я использую стандартные кнопки, которые формируются из интерфейса операционной системы. Все стили для них - это просто задание их расположения относительно друг друга и всей формы.

Кнопка типа submit может быть только одна. Есть кнопка типа reset, как вы уже успели заметить, она сбрасывает значения, введенные в форму. И делает это безо всяких посторонних усилий. Я не вижу смысла пытаться изобрести какой-то другой способ, и, честно говоря, иначе как придумыванием колеса это не назову.

Я не очень поняла смысл ваших действий над бедной кнопкой. Для чего из нее делать нечто не похожее на кнопку и привешивать cursor: pointer;? Если это кнопка, уж поверьте, никто не перепутает ее с блоком или чем-то иным, и это правило, равно как и все прочие, не будет иметь смысла.
Я не говорю, что кнопки плохо оформлять. Хорошо. Но в меру. Лично я не вижу смысла оформлять эту кнопку именно так и именно здесь.
На вторую кнопку вы разместили background. Возможно, это зачем-то нужно. Мне, правда, кажется, эти кнопки должны быть максимально похожи друг на друга.
Значения middle для свойства vertical-align для строчного элемента input не бывает. Оно бывает только для ячеек таблицы. Для строк вы можете использовать числовые значения.
Вообще, подобные манипуляции обычно проделываются, когда вы хотите создать кнопку из обычной ссылки. Здесь, мне кажется, разумнее обойтись стандартными. Можно покрасить их и/или поменять цвет текста, но не "убивать" кнопку и создавать ее заново. Тем более что у вас возникают трудности с кроссбраузерной реализацией.
Не стоит усложнять себе же задачу, когда существуют уже готовые методы.

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

Вообще, лишние стили и классы - это просто повсеместная беда. Ну не желают люди почему-то использовать имена элементов, селекторы по вложенности и многие другие очень удобные возможности CSS. Честное слово, совсем не обязательно использовать классы, чтобы оформить элементы. Если бы у нас не было IE, то подобные атрибуты вообще почти потеряли бы свой смысл.

width: 182px !important;
width: 182px;
Милый хак. А в чем его смысл, если не секрет?

- используйте padding или margin

По поводу верстки форм советую прочесть эту статью http://webmascon.com/topics/coding/30a.asp Статейка 2002 года, так что версии браузеров, описываемые в ней, не стоит использовать в качестве основных.

По поводу IE7 - из любой статистики совершенно четко видно, что IE7 гораздо более распространен, чем все подверсии IE5, вместе взятые, и с каждым днем его доля все больше увеличивается. Делайте выводы.

Отредактированно Аня (14.02.2011 23:52)

alemiks · #10 15.02.2011 09:52

Аня написал:

Значения middle для свойства vertical-align для строчного элемента input не бывает. Оно бывает только для ячеек таблицы

небольшой коммент:
— значение middle свойства vertical-align для строчных элементов бывает;
— input — не строчный, а строчно-блочный элемент

Dreamer · #11 15.02.2011 16:45

Аня спасибо за ваше мнение, я прочел большинство статей с вебмаскона еще в начале изучения мной css.

Аня написал:

Я не очень поняла смысл ваших действий над бедной кнопкой. Для чего из нее делать нечто не похожее на кнопку и привешивать cursor: pointer;? Если это кнопка, уж поверьте, никто не перепутает ее с блоком или чем-то иным, и это правило, равно как и все прочие, не будет иметь смысла.
Я не говорю, что кнопки плохо оформлять. Хорошо. Но в меру. Лично я не вижу смысла оформлять эту кнопку именно так и именно здесь.
На вторую кнопку вы разместили background. Возможно, это зачем-то нужно. Мне, правда, кажется, эти кнопки должны быть максимально похожи друг на друга.

Я бы с удовольствием обошелся бы цветом бордюра и бекграундом но по дизайну кнопка должна выглядеть именно так.
Смысл заключается в том я подкладываю под кнопку картинку а сверху пишу текст в значении валуе.
Вот так выглядит код кнопки, я исползую такое написание чтобы уменьшить код.
Значение для курсора прописано для того чтобы его понимал ИЕ старых версий иначе при наведении на кнопку курсор будет иметь вид стрелки по дефаулту.

Код:

alemiks · #12 15.02.2011 17:03

Dreamer написал:

Я бы с удовольствием обошелся бы цветом бордюра и бекграундом но по дизайну кнопка должна выглядеть именно так.
Смысл заключается в том я подкладываю под кнопку картинку а сверху пишу текст в значении валуе.

если нужна кнопка, строго соответствующая дизайну, то воспользуйтесь или или так как поведение свойств фона, рамок и т.п. для элементов форм спецификацией не определено

w3c написал:

CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further.

Dreamer · 15.02.2011 18:15

Спасибо alemiks, вот у меня все руки не доходят узучить всю спецификацию, в итоге натыкаюсь на такие вот ошибки.
Да в итоге в разных браузерах есть отличия в оступах и приходится переделывать на картинки, а value пустым оставлять ну в тег alt на всякий случай писать название кнопки. Но бывают случаи когда такое написание вполне нормально смотрится в разных браузерах использовал этот прием в двух сайтах, а на том который щас делаю начались глюки с отступами.

Форум hotibo.ru

#1 09.02.2011 18:02

Отображение селектов в разных браузерах

Код:

#2 09.02.2011 19:04

Re: Отображение селектов в разных браузерах

#3 09.02.2011 19:25

Re: Отображение селектов в разных браузерах

#4 09.02.2011 23:06

Re: Отображение селектов в разных браузерах

#5 12.02.2011 18:54

Re: Отображение селектов в разных браузерах

Код:

#6 12.02.2011 21:03

Re: Отображение селектов в разных браузерах

#7 14.02.2011 15:21

Re: Отображение селектов в разных браузерах

Аня написал:

Аня написал:

#8 14.02.2011 16:31

Re: Отображение селектов в разных браузерах

Аня написал:

Код:

#9 14.02.2011 23:46

Re: Отображение селектов в разных браузерах

#10 15.02.2011 09:52

Re: Отображение селектов в разных браузерах

Аня написал:

#11 15.02.2011 16:45

Re: Отображение селектов в разных браузерах

Аня написал:

Код:

#12 15.02.2011 17:03

Re: Отображение селектов в разных браузерах

Dreamer написал:

w3c написал:

#13 15.02.2011 18:15

Re: Отображение селектов в разных браузерах

Board footer