При использовании абсолютного позиционирования элементов на странице есть один принцип, который поможет вам разобраться в их использовании.

 

Когда у селектора задано свойство postition:absolute, страница рассматривается как XY-сетка и по умолчанию точка 0,0 находится в верхнем левом углу экрана. И если мы абсолютно позиционированный элемент смещаем на 30 пикселей слева и на 70 пикселей сверху, то смещение начинается от верхнего левого угла независимо от того, где этот элемент расположен в HTML разметке.

Добиться кроссбраузерности обычными средствами CSS бывает не так то просто. В таких случаях можно воспользоваться CSS хаками. CSS форматирование элемента страницы с жестким указанием браузера для которого производится это форматирование. Для каждого браузера есть свои CSS хаки, так что можно добиться абсолютной кроссбраузерности.

 

При использовании табличной верстки, не составляло труда выровнять, элементы или текст внутри ячейки, достаточно было задать свойство vertical-align: middle.

Как оказалось, элементы уровня блок не могут, аналогично ячейкам таблицы, вертикально выравнивать. Но CSS позволяет изменять поведение элементов (display), например, сделать блок, который будет себя вести как ячейка таблицы — display: table-cell. Казалось бы, вот оно решение, простое и понятное, осталось добавить vertical-align: middle и можно наслаждаться результатами своих трудов. Но есть горяче любимый всеми веб-разработчиками браузер, который не даст так быстро ликовать — Interner Explorer. IE6 и IE7 не поддерживает значение свойства display: table-cell. Приходится прибегать к программному решению (expression) для этих браузеров.

Думаю, для многих web-мастеров уже не составляет труда сверстать страницу, где «подвал» будет прижат к её нижней границе. Вот метод который использую, подсмотренный уже не помню где.

Очередная мини шпаргалка, на этот раз рассмотрим вопрос: как задать стиль лишь для input c type равным button. Может быть, кому-то эта информация покажется тоже интересной.

Есть навигация (список ul). Каждый элемент списка (li) — блочный. Количество элементов навигации заранее не известно. Список в виде строки (li имеют свойство float: left/right), для того чтоб навигация была в одну строку. Нужно выровнять эту навигацию по середине родителя...

Собственно заметка шпаргалка, как изменить отображение поля ввода input с помощью css и jQuery...