CSS *

Предыстория

На поиски по теме, указанной в заголовке меня сподвигла задача сверстать календарь для нашей системы отчетов. Что примечательно, мои действия почти в точности повторяли действия автора статьи, которую я нашел и перевёл (под катом).
Встав перед задачей сверстать календарь я тоже «мыслил анти-таблично», и после не долгих раздумий сварганил из списка календарец. Но к концу рабочего дня и всех мытарств, меня переклинило по дороге домой тоже, что и автора статьи — а как быть с днями недели?
По пути я обдумал этот вопрос и сформулировал запрос для Google — calendar table or list. Первая же ссылка привлекла меня и подтвердила мои соображения относительно того что календарь это всё-таки таблица а не список.
Я не претендую на оригинальность, конечно же, и возможно эта тема уже поднималась, но именно в таком разрезе я её ещё не встречал. В русскоязычной части интернета я ещё как-то читал статью Neutrino о его опыте вёрстки календаря, тогда я ещё удивился предложенному решению, но к сожалению тогда о семантике я мало задумывался)
Для предотвращения возможных будущих заблуждений, я решил перевести найденную статью, так как она вполне убедительна и раскрывает довольно полно затронутую тему. Надеюсь, также на вашу критику перевода, так как с переводом у меня не всё гладко, по-моему)

• Перевод: Lesha Ogonkov, 15.08.2007
• Оригинал статьи: Calendar Semantics: Table or List

Функция кэширования — удобная и обоснованная штука, особенно для проектов с огромной нагрузкой и десятками тысячь единовременных пользователей. И речь даже не столько о кэшировании страниц, сколько о принудительном сохранении внешних CSS файлов и картинок.
Серверам-то хорошо, а вот разработчикам — не сладко. Ctrl+F5 в браузере часто не решает проблемы, а не малоизвестный способ с добавлением к имени внешнего CSS файла псевдо параметра вида ?v=1.1 не всегда идеален. В нашем случае, например, вообще не используются сервера для отладки и все изменения сразу тестируются в бою =[. Понятно, чем это чревато для пользователей, а для меня так вообще аду подобно — чтобы увидеть внесенные в CSS изменения приходится каждый раз менять в шаблоне значение ?v= и нет ни малейшей возможности генерировать это число случайным образом, как я бы делал, если бы были тестовые сервера…
Вы тоже все еще кипятите? Тогда мы идем к вам!

Корплю над стилями PDA-версии некоего весёлого сайта. Вижу, что IE Win Mobile и Opera Mobile имеют различия в отображении одного и того же кода:

body {
font: 100% Verdana, Arial,sans-serif;
color: #000;
background: #fff;
}

Шрифт в Opera Mobile выглядит 2 раза крупнее, нежели в IE. Оба браузера с настройками по умолчанию. Под катом рабочее решение. Не наступайте на грабли, друзья.

1. Удвоение полей у плавающих (float) блоках в IE 5-6

Проблема: мы очень часто используем поля (margin) и не реже их применяем к блокам со свойством float, ожидая нужный результат, можно сильно удивиться, когда IE вдруг сдвинет наш блок на большее расстояние, чем предполагалось. Конкретно: ошибка левого поля (margin-left) – при свойстве float c параметром left, ошибка правого поля (margin-right) – при свойстве float c параметром right.

#FloatBlock
{
background-color:#ccc;
width:200px;
height:100px;
float:left;
margin-left:50px;
}

Ожидаемый результат (корректный):


Какой же результат мы видим в IE (некорректный):