Метка: азы верстки


Warning: Illegal string offset 'caption' in /home/k/kashinanru/public_html/wp-includes/media.php on line 2108

Warning: Cannot assign an empty string to a string offset in /home/k/kashinanru/public_html/wp-includes/media.php on line 2108

Небольшое предисловие. Так случилось, что я подписался на сайте WSG на мейл-лист для обсуждения различных вопросов, связанных с применением веб-стандартов в ежедневной практике. Да, в этой подписке случаются интересные обсуждения, но зачастую там появляются вопросы настолько простые, что даже становится как-то неловко за авторитет уважаемой WSG. Вот и в этот раз вопрос был просто потрясающим: можно ли использовать картинку-бекграунд для кнопки с нефиксированной шириной. Но не это меня побудило меня черкануть пару строк. В одном из ответов, как лучше все сделать проскользнул совет:

Something like this (как-то так):
button {padding:2px 5px;background: #FAF9F5 url(../images/bgimg.png) repeat;line-height: 1.5;
}
then use smaller padding left/right value for IE, e.g. (и потом уменьшите отступы для �?Е)
button {padding: 2px 1px !important}

Вот последняя строчка и вызвала мое изумление. Уважаемый подписчик WSG не знает как можно избавиться от лишних отступов по бокам в кнопках в �?нтернет Експлорере.

Поясню в чем дело. �?нтернет Експлорер в версиях до 7 включительно добавлял в кнопках (будь то input, илиbutton) справа и слева непонятные отступы, причем, чем длиннее была надпись на кнопке, тем больше отступы. Вот как-то так:

лишние отступы в кнопках в браузерах ?нтернет Експлорер 5-7

Тогда как в остальных браузерах (для меня это Файрфокс, Опера и Хром) все выглядит так:

отступы в кнопках в файрфоксе
отступы в кнопках в файрфоксе

Никаких непонятных отступов, все одинаково, независимо от количества знаков в надписи.

�? что же делать? Как привести в чувство этот загадочный �?Е? Читать далее

Есть у �?Е6 такая особенность: если какому-либо блоку задать ширину, то �?Е6 воспринимает эту ширину, как минимально возможную и, если содержимое блока оказывается шире заданной ширины, то �?Е6 растягивает блок до размеров содержимого. Тогда как другие браузеры, в полном соответствии стандартам сохранят указанную ширину, а содержимое просто покажут выступающим за пределы блока (если не указано свойство overflow, отличное от значения visible (значение по умолчанию)).

Читать далее

Вендорные префиксы

Это приставки (префиксы), используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт, CSS-свойств. Приведу список некоторых префиксов для наиболее распространенных браузеров.

  • -o- — префикс для браузера Опера
  • -moz- — префикс для браузеров из семейства Mozilla
  • -ms — префикс для �?нтернет Експлорера 8 (да, даже Microsoft ввела свой префикс, в частности для того, чтобы изобретенные ею CSS-фильтры можно было использовать, не нарушая при этом веб-стандарты)
  • -webkit- — префикс для браузеров, построенных на движке Webkit, в частности Safari и Chrome
  • -icab- — префикс для браузера iCab (альтернативного, как заявлено на родном сайте, браузера для Apple)
  • и закончу префиксом -khtml-. KHTML — компонент для просмотра HTML документов разработанный для среды KDE для UNIX-систем. Был представлен в 2000 году, для использования в Konqueror

�?спользовать префиксы очень просто. Для этого перед экспериментальным или нестандартным CSS-свойством написать соответствующий префикс, например, свойство text-overflow Opera не поймет, если не написать его таким образом: -o-text-overflow . А CSS-фильтры от Microsoft можно использовать в IЕ8 следующим образом: -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)". Рекомендую ознакомиться с подобным использованием дополнений к CSS от Microsoft в их родном блоге