Inline-block и другие

inline-block
При этом значении свойства display элемент ведет себя как обычный строчный элемент (не вызывая перевода строки до и после себя, в отличие от блочных элементов), но при этом содержимое этого элемента форматируется как внутри элемента блочного. Элементу же можно будет задать свойства width и height, что невозможно для элементов строчных

Проще, чем долго и путано объяснять, показать на примерах. Для наглядности подкрасим элементы и зададим им размеры и отступы

  1. блочный элемент
    еще блочный элемент
    Как видите, каждый новый элемент располагается ниже следующего, даже если рядом с предыдущим есть место
  2. элемент со свойством display: inline-block элемент со свойством inline-block элемент со свойством inline-block и vertical-align: middle, в отличие от предыдущих с выравниванием по базовой строке — эти элементы находятся на одной строке, но при этом «слушаются» свойств width и height и контент внутри них ведет себя как и в обычном блочном элементе. �? они не теряют свойства строчных элементов выравниваться по высоте строки. Еще интересно, что переносятся эти элементы на новую строку целиком, в отличие от строчных элементов, которые «рвутся», если не помещаются на одной строке.
  3. элемент со свойством display: inline еще строчный элемент — эти элементы простые строчные, и им не удастся задать размеры. �? попытка вызвать перевод строки внутри элемента с помощью BR приведет именно к переводу строки. элемент со свойством display: inline
    и
    BR‘ом внутри

Я бы сделал лучше

Студия Лебедева порадовала нас новым творением — обновился интернет-магазин Техносилы. Все мило и, как обычно в последнее время у Лебедева, лаконично, но…

Что мы видим на первой же странице:

technosila1

Названия товаров не помещаются и просто обрезаются свойством overflow: hidden
Не очень красиво, я бы сказал. Но ведь есть же замечательное, но крайне редко используемое (мне ни разу не попадалось на глаза его использование) свойство text-overflow: ellipsis. Что удивительно, его (это свойство) поддерживает дружное семейство браузеров по имени Internet Explorer. Это свойство имеет два (согласно с сайтом MS) значения: clip (по умолчанию) и   ellipsis, что в сочетании со свойством  overflow: hidden дает замечательный результат: текст, который не помещается в каком-либо элементе обрезается с заменой последних символов на многоточие!!! Получается очень аккуратно и симпатично.
А вот и примеры:

Без применения overflow и text-overflow

Съешь еще этих мягких французских булок

Теперь установим overflow: hidden и text-overflow:clip; (поведение по умолчанию)

Съешь еще этих мягких французских булок

�? наконец требуемый результат в результате применения overflow: hidden и text-overflow:ellipsis;

Съешь еще этих мягких французских булок

Некоторые браузеры, в частности Opera, требуют своего префикса для этого свойства. MSDN рекомендует так же использовать префикс -ms для IЕ8, но понимает это свойство и без него.

Проверил, что Хром 2 и Сафари 4 понимают без префиксов, а ФайрФокс 3 не понимает вовсе

Но если не использовать это свойство, то хотя бы снабдить заголовок соответствующей всплывающей подсказкой, хотя бы в виде title

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

Это приставки (префиксы), используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт, 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 в их родном блоге

Как расположить блок посередине?

Простой вопрос, но который регулярно задают: как выровнять блочный элемент (div или table, в зависимости от того, что вы используете в качестве контейнера) посередине экрана?
Ответ как всегда прост донельзя:

  • Если вы работаете в режиме поддержки стандартов и не рассматриваете браузеры, старше IЕ6, то достаточно написать блоку свойство margin: 0 auto.
  • Если же вы верстаете в quirks mode или  в требованиях в верстке есть поддержке IЕ 5, то вам придется для родительского, относительно вашего искомого контейнера добавить свойство text-align: center

Читать далее Как расположить блок посередине?

�?Е6 в виртуальной машине от Microsoft

Маленькая радость:)
С подачи хабра установил и запустил VirtualPC. Теперь Developer Toolbar в �?Е6 работает и у меня. Ура!

Читать далее �?Е6 в виртуальной машине от Microsoft