Сегодня продолжу мучать html тег input в целях улучшения его юзабилити. Начало можно почитать в статье “Украшаем input с помощью CSS”.
Спасибо всем кто проявил участие в обсуждении прошлой статьи и внес замечания, которые сегодня постараюсь учесть. (more…)
Прежде чем что-то украшать, отвечу на вопрос зачем это делать. А делать это нужно для того, чтобы глазу было за что зацепиться, легче запомнить или представить для чего, собственно, именно это поле ввода, именуемове английским словом input, предназначено. Ну, и, конечно, для красоты :), от нее никуда не деться, она, как известно, спасет Мир!
Приступим. (more…)
Уже третий год проводится CSS Naked Day, в этом году принять участие в нем решил и наш блог.
А состоит она в том, что нужно убрать со своего сайта css.
А нужно это для того, чтобы популяризировать веб стандарты и правильную, семантическую верстку. Объясню. Если Вы правильно сверстали, сохраняя семантику html, то Ваш сайт от отключения ничего не потеряет, все будет так же естественно выглядеть, заголовки - заголовками, списки - списками и т.д. Собственно это и можно наблюдать сегодня на этом блоге.
Более подробно о мероприятии можно почитать здесь.
Уж от какого браузера я и ожидал сюрпризов, так это точно не от Opera. А дело было так. Был обычный макет:
Привел не весь макет, а большую его часть, чтобы Вы имели представление о нем. Тут нас интересует элемент с id "menu". Именно с ним в Opera и начались проблемы.
Выглядело это следующим образом:
Кажется, все хорошо, но если в браузере Opera воспользоваться скролингом, так чтобы меню оказалось не в рабочем окне, то при возвращении скролинга в исходное положение, меню исчезнет.
И в голову сразу лезут всякие нехорошие мысли о разработчиках браузеров. В частности Opera(Version 9.24, Build 8816), т.к. в Firefox и IE подобного не происходит.
Но стоит немного подумать - и в голове всплывает, что подобные чудеса не редки и в общелюбимом браузере IE 6. В народе эти чудеса получили название - IE6 Peekaboo Bug.
Поэтому, применив одно из средств для борьбы с подобным в IE6, баг был исправлен и в этом случае. А именно, исчезающему элементу было добавлено css свойство position: relative.
Статью решил назвать "ul li баг в IE", хотя под это описание могут попасть много багов. Речь сегодня пойдет лишь об одном из них. А именно о непонятных отступах между элементами li. Рассмотрим следующий CSS и HTML код, который представляет из себя простое меню.
Сначала CSS: (more...)