Более подробный пример.

Думаю, проблема всем понятна - при указании размера шрифта в процентах (да и в em-ах тоже, кстати говоря) для тех элементов, которые могут быть вложенными приводит к плохим последствиям! Будьте осторожны!

Лично я везде указываю размеры шрифтов в пикселях и на мой взгляд - это вполне оправданно - на моей памяти было мало случаев, в которых размеры шрифтов действительно рассчитывались друг относительно друга (разве что относительно body, но тут уж ничего не поделаешь).

Вот так она выглядит:

А вот и её код:

#nav, #nav * {
  margin: 0;
  padding: 0;
}

#nav {
  overflow: hidden;
  background-color: #FFFFCC;
  border: 1px solid #73B65A;
  margin: 10px 0;
  zoom: 1;
}

#nav li {
  float: left;
  display: block;
}

#nav li a {
  padding: 2px;
  margin: 0 5px;
  display: block;
  height: 100%;
  color: #000000;
  text-decoration: none;
  border-top: 3px solid #FFFFCC;
  border-bottom: 3px solid #FFFFCC;
  float: left;
}

#nav li a:hover {
  border-bottom: 3px solid #73B65A;
}

<ul id="nav">
  <li><a href="...">Гостевая книга</a></li>
  <li><a href="...">Прайс</a></li>
  <li><a href="...">Login</a></li>
</ul>

Пример.

Авось кому-нибудь пригодится.

PS. Менюха на оригинальность и инновационность не претендует!

UPD: Теперь хочу Eric Meyer on CSS и CSS Web Site Design.

Если вкратце: селектор - это некоторый шаблон (паттерн), который “выделяет” нужные нам обьекты из DOM‘а. Т.е. селектор body div.right “выделит”из DOM’а все блоки div, которые (ясное дело ) находятся внутри тега body и имеют класс right. В CSS3 таких селекторов довольно много. Кому нужно - вот их список.

Так вот, в связи с переходом на линукс, у меня появился новый браузер, а именно Konqueror, на котором я тоже захотел запустить этот тест. Собственно из-за результатов запуска я и пишу этот пост.

Приведу табличку протестированных браузеров:

Тестов, как видно из таблицы, всего 578. Делаем выводы…

Кстати, насчет того, что результаты такие высокие (все-таки до CSS3 еще далеко) - это все благодаря тестам “этот селектор не должен подходить к этому обьекту DOM” (т.е. браузер “валит” тесты, в которых селектор должен подходить, потому что не знает такого селектора, но правильно обрабатывает тесты, в которых не должен - опять же потому что селектора не знает ).

PS. У кого есть возможность и желание - протестите на Safari для винды.

UPD: за результаты тестов на Safari для MacOS благодарим dimm’а :)

Что такое фреймворк

На этот вопрос нам с легкостью поможет ответить моя любимая википедия: “каркас программной системы (или подсистемы). Может включать вспомогательные программы, библиотеки кода, язык сценариев и другое ПО, облегчающее разработку и объединение разных компонентов большого програмного проекта. Обычно объединение происходит за счет использования единого API.”. Говоря проще - фреймворк - это набор программ/кусков кода, которые направлены на решение одной определенной задачи.

Что такое CSS-фреймворк

Тут можно долго думать над тем, что же он должен содержать. На мой взгляд, в первую очередь в нем должен быть набор классов, которые часто применяются при верстке, например:

.clear {

    clear: both;

}

Далее - фреймворк может, а в некоторых случаях и должен, содержать реализацию некоторых отдельных компонент, например - вертикальное меню, горизонтальное меню, представление форм. Причем для каждой “компоненты” вполне можно делать несколько реализаций, которые должны быть взаимозаменяемыми без правки HTML-кода.

И третье, что ВОЗМОЖНО стоит вносить в фреймворк - полностью сверстанные html-страницы (например, 3хколоночная, 2хколоночная и т.д.).

На этом предложения по структуре фреймворка у меня заканчиваются. Кому есть что сказать - веллкам в комментарии.

PS. На данный момент уже есть такие фреймворки, но все по тем или иным причинам меня не устраивают. Хочется объединить уже сделанное и добавить своего. :)

PPS. Кому все-таки интересна моя текущая работа: список страниц, которые уже сделаны, либо делаются.

Планы на эту и следующую неделю таковы:

1. CSS, если найду дизайнера
2. C++
   1. Класс графа (если честно, сделанный так сяк, сил уже нет моих лабы делать)
   2. Класс-обертка для работы клавиатурой
   3. Поиск подстроки в строке за сублинейное время - поглядим, как получится

Отложенные:

1. PHP
   1. Zend Framework ModelDb-класс, боюсь просто не осилю продолжение
   2. Краткий обзор CodeIgniter, тоже будет, но не в ближайшие 2 недели

Пока что все. Что будет дальше - как жизнь покажет.

На XHTML.ru нашел сводную табличку по браузерам. Мой любимый FF2 впереди ;)

На данный момент ведется 2 проекта. Один из них уже готов, осталось контентом наполнить, но зная заказчика - контент я могу ждать очень долго. А пока что можете посмотреть на дизайн и верстку - http://agiscentre.com/. Второй же - пока что секрет.

PS. Как оказалось, таблицами я верстать не умею :) С помощью CSS мне как-то приятнее и удобнее, хоть и сложнее. Я аж сам удивился… За это спасибо Ивану Сагалаеву и Gansik‘у.