Мне ваши примеры напомнили незабвенные уроки попова. Вроде бы куча нужных функций задействовано и представлены они правильно, но сам пример в комплексе является сферическим говнокодом в вакууме, прямо экспонат из палаты мер и весов.
Объясняю:
1. Код навигационного меню обычно выглядит так:
Код:
<ul>
<li><a href="#">Пункт1</a></li>
<li><a href="#">Пункт2</a></li>
<li><a href="#">Пункт3</a></li>
</ul>
Теперь сравните со своим и подумайте, как вы будете уговаривать, например, джумлу или вордпресс вывести вам меню в виде
Код:
<a href="#"><div></div>Пункт N</a>
Заметьте, что я не говорю сейчас о семантике, которую так люблю. Просто практика, ничего личного!
2. Как там древние говорили? Мотек мне друг, но истина - дороже!
Все, что можно сделать без картинок, нужно делать без них!
В вашем случае правильным решением будет псевдоэдемент :before и псевдосимволы квадратика и кружочка.
Разумеется, если у вас в качестве булетиков применяются бабочки или танчики, то без картинок не обойтись. Тем не менее, и здесь :before рулит.
И еще парочка советов:
1. Зачем вы всюду используете знак ">" ? И без него почти все будет работать.
2.
a > img{border:0;} /*обводка logo, для факин IE*/
В таком случае, FF тоже факин. Он тоже рамку делает картинкам-ссылкам. Используйте reset.css от Эрика Мейера (гуглить самостоятельно).
3. Я бы
не советовал обыгрывать list-style от списка, как это показал BaNru в своем примере. Беда в том, что
все браузеры показывают эти булетики
в разных позициях. И бороться с этим невозможно.
А вот и примерчик:
Код:
<!DOCTYPE html>
<meta charset="utf-8">
<title>Треугольнички</title>
<style type="text/css">
ul {list-style:none}
li {position:relative;}
li a {text-decoration:none;}
li a:hover {color:red}
li a:before {
position:absolute;
content:"\2663";
left:-20px;
top:-1px;
}
li a:hover:before {
content:"\2665";
}
</style>
<ul>
<li><a href="#">Первое</a>
<li><a href="#">Второе</a>
<li><a href="#">Третье</a>
<li><a href="#">Четвертое</a>
</ul>
Коды псевдосимволов (шестнадцатиричные!) берем из стандартной таблицы символов виндоус.
Будьте осторожны! Не все псевдосимволы отображаются! Проверяйте!
...кто сказал,что маркер перед текстом?,добавляется еще и :after?