Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Списки и позиционирование внутри их input 
:(
    Опции темы
php5
Дата 22.9.2008, 13:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Есть список  след. вида :
Код


<ul>
   <li ><input type="checkbox" checked="" > <a href="#">TEXT1 </a></li>
       <li ><input  type="checkbox" checked="" > <a href="#"> TEXT2 </a></li>
      <li><input class="input1" id='_search'>  <input type="image" src="img/ok.jpg"/></li>
      <li ><input type="radio" name="r"> <span> TEXT3</span></li>
      <li ><input  type="radio" name="r"> <span> TEXT4</span></li>
</ul> 
ul, ol, li{
border:0px none;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding-bottom:5px;
}
Ul { padding-left:10px;}
input{
    font-weight:normal;
    vertical-align:middle;
    font-family: Verdana,Helvetica;
    font-size:11px;
}

В Opere и в  Firefox   input  позиционируется как нужно а вот в IE  расстояние между строк списков увеличено  также  иметься  не нужный левый отступ input type="radio" input  type="checkbox"  как избавиться  в IE от  ненужных отступов  ? 

Также  в Опере checkbox и radio имеют  непонятный вид  , походу что то  с их стилями не то , как их тоже  подправить  ?  



Это сообщение отредактировал(а) php5 - 22.9.2008, 13:19

Присоединённый файл ( Кол-во скачиваний: 16 )
Присоединённый файл  radio.JPG 1,47 Kb
PM MAIL   Вверх
NDenis
Дата 22.9.2008, 13:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



попробуйте вначале обнулить все отступы
Код

ul, ol, li, input {margin:0; padding:0;}

по умолчанию, отступы в разных браузерах отличаются
Цитата

походу что то  с их стилями не то , как их тоже  подправить 

средствами чистого CSS это не сделать, только с добавлением JS.. на сколько мне известно
PM MAIL   Вверх
php5
Дата 22.9.2008, 18:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Цитата

ul, ol, li, input {margin:0; padding:0;} 
 пребывал не помогает 
Цитата

средствами чистого CSS это не сделать, только с добавлением JS.. на сколько мне известно

А причем тут  к внешнему  виду input type="radio"   JS ? smile 
PM MAIL   Вверх
webster
Дата 22.9.2008, 18:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Ненужный отступ можно убрать, взяв <input /> в <label>:
Код

<label><input /></label>
А расстояние сделать одинаковым можно, задав определенное значение высоты строчного интервала для <li>:
Код

li {
line-height: 2em;
}
такой, чтобы межстрочное расстояние было во всех броузерах одинаковым, а по-умолчанию эти элементы <input /> имеют действительно разную высоту в различныч броузерах.
PM MAIL   Вверх
php5
Дата 22.9.2008, 18:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



межстрочное расстояние  сделать  что бы во всех браузерах было одинокого получилось , в вот с  левым  отступам  у  input   с помощью  <label> справиться не получилось

Добавлено через 5 минут и 59 секунд
Как вариант конечно можно сделать класс для  <li> который содержит  input  со стилем который бы  хавал только IE,  что то типа .li_ie{//margin-left:-4px;},  но не хотелось бы идти по такому пути  smile 
PM MAIL   Вверх
webster
Дата 22.9.2008, 18:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Это связано с разными способами отрисовки объектов с type="radio", здесь можно предложить только два выхода, если эта разница не критична - оставить как есть, если она значительная - то "подвинуть" <input /> свойством position: relative; margin-left: -10px; (или сколько понадобится) или position: absolute; и margin-left: -10px;.
PM MAIL   Вверх
php5
Дата 22.9.2008, 18:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



А как быть с внешним видом  type="radio" ?   С какого это перепуга  Opera  их так  покаличному  отображает  ?  http://forum.vingrad.ru/act-Attach/type/post/id-1647162.html

Это сообщение отредактировал(а) php5 - 22.9.2008, 18:54
PM MAIL   Вверх
webster
Дата 22.9.2008, 19:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



В каждом броузере эти элементы прорисованы по-своему, хотя бы посмотреть на Safari, там вообще все элементы с эффектом glass выполнены (прорисованы).
Можно конечно использовать подмену рисунком (наиболее понравившимся) этого элемента, только надо будет писат код javascript, чтобы при клике на нем выделялся реальный (сокрытый) элемент type="radio", но это в определенном смысле неудобно, а в большинстве случаев и не нужно.

Это сообщение отредактировал(а) webster - 22.9.2008, 19:09
PM MAIL   Вверх
php5
Дата 23.9.2008, 10:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Дело не в том  что меня не устраивают  вид  type="radio" в Opera , а в том что при  открытии  моей страницы  с  type="radio"   в Opera они  отображаются не так  как обычно  по умолчанию 
PM MAIL   Вверх
bars80080
Дата 23.9.2008, 17:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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



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


 




[ Время генерации скрипта: 0.1070 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.