[решено] Вопрос по верстке CSS

Прислано: olk

чт, 19/06/2008 - 07:40

Другие статьи по теме:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru" dir="ltr">
<head>
  <title>test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">	
body { padding:0; margin:0; font-size: small; line-height: normal; background-color: #fff; }
li { display:inline; padding-left: 4px;padding-right: 4px; border: #ccc 1px solid; }
ul { list-style-image:none;list-style-position:outside;list-style-type:none;}
</style>
</head>
<body>
<br>
<div>
<ul>
<li class="li1"><a href="#">list item 1</a></li>
<li class="li2"><a href="#">list item 2</a></li>
</ul>
</div>
<br>
</body>
</html>

Смысл вывести две ссылки, но так что бы между ними не было "горизонтального просвета".
Так вот в ИЕ7-все ок, Опера и FF выдают межлу LI небольшой промежуток - но при этом если я напишу вместо

<li class="li1"><a href="#">list item 1</a></li>
<li class="li2"><a href="#">list item 2</a></li>
 
 
<li class="li1"><a href="#">list item 1</a></li><li class="li2"><a href="#">list item 2</a></li>

т.е. если убрать перевод строки , то все будет ок ...
Собственно вопрос, про что я забыл в стилях ? нужно что бы вывод был одинаковый независимо от того есть \n или нет, так как LI естетвенно генерятся друпалом ...

‹ Меню при создании шаблона [Решено] Как вставить флеш в шаблон Drupala 6 ›

Комментарии


Настройки просмотра комментариев

Выберите нужный метод показа комментариев и нажмите "Применить"
Опубликовано Химический Али в чт, 19/06/2008 - 07:56.
Химический Али

Возьмите firefox & firebug

зы. А причем здесь друпал?


Опубликовано olk в чт, 19/06/2008 - 08:03.
olk

еще раз сорри , но я же уже заранее извинился :) "Сори за маленький офтоп", а друпал
тут при том, что при генерации допустим primary-links , он после каждого <li> ... </li> вставляет \n, что в принципе
логично ... не переопределять же из за такой ерунды theme_links ...
Ps. firefox & firebug у меня есть :) но в данном случае он как раз не очень помагает, я просмотрел все стили но так и не понял в чем затык :(


Опубликовано olk в чт, 19/06/2008 - 09:10.
olk

Нашел решение, правда не очень изящное :) может кому пригодиться или может кто найдет лучшее решение ,
идея такая, у "обрамляющего" класса усанавливаем font-size: 0; при этом не забываем в самих элементах вернуть прежний размер шрифта ...

ul { list-style-image:none;list-style-position:outside;list-style-type:none; font-size:0;}
li { display:inline; padding-left: 4px;padding-right: 4px; border: #ccc 1px solid; font-size:small;}


Опубликовано RomahA в чт, 23/10/2008 - 11:38.
RomahA

2olk
если ещё актуально, или может кому-то ещё будет полезно:
в класс стиля тега li добавить свойство float: left; чтоб li вел себя как блок.
Пробелы уберутся!