Убрать обводку при клике на ссылку

Чтобы при клике на ссылку было так:

а не так:

Взвешиваем селекторы

Взвешивание селекторов:
1) За каждый селектор - 1 балл
2) За каждый класс - 10 баллов
3) За каждый селектор - 100 баллов

Выровнять блок по вертикали

Довольно много времени уходило на центрирование блока по верикали внутри другого блока. Назовём внешний блок .parent, а внутренний - .child и рассмотрим придуманные, увы, не мной, но очень классные способы центрирования!

z-index в ie7-

Немало промучившись с перекрыванием слоёв я нашла вот такое решение проблемы z-index в ie7-

Адаптивный дизайн

Задача: написать в один файл стили для разных разрешений браузеров или разных устройств.

Горизонтальноe меню по всей ширине

Задача: выровнять элементы (допустим горизонтальный список) по ширине контейнера. Например как меню на этом сайте:

Грамотное горизонтальное меню

Задача: сделать горизонтальный список с разной высотой элементов так, чтобы выравнивание шло по верхам элементов, но и сохранялась высота контейнера, где они лежат.

Некоторые заметки и наблюдения

position:relative
блок с position:relative и его содержимое (неважно с position:absolute или нет) ложится поверх других. Если таких блоков несколько, то они ведут себя как друг относительно друга так же как без position.

margin-top, margin-bottom, padding-top,padding-bottom и display: inline;
У линейных элементов верхний и нижний margin и padding не влияют на их положение по вертикали. Надо прописывать display: inline-block.

CSS хаки. FF

1) html:root .style {background: #FA0;} 2) .style, x:-moz-any-link {background: #FA0;}

CSS хаки. IE

Хаки для моего любимого браузера :)

CSS хаки. Opera

1) @media all and (min-width: 0) { // это понимает так же safari mobile .style { background: #FF0; } } 2) html:first-child .style { background: #FF0;} 3) /*--- Чтобы было видно только браузеру Opera версии от 10 и выше ---*/ @media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { .element{/*описание стиля только для Оперы*/} }

Табы без js

Задача: сделать табы без яваскрипта.

Пункт меню с нестандартной подложкой

Задача: сделать так

Т.е. ширина пунктов меню разная, а паддинги справа и слева должны быть равными для всем пунктов меню.

Кроссбраузерный градиент

background: #F8F8F8; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEFEFE', endColorstr='#F3F3F3'); /* для IE6-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#F3F3F3)); background: -moz-linear-gradient(top, #FEFEFE, #F3F3F3); /* для firefox 3.6+ */ background: -o-linear-gradient(top, #FEFEFE, #F3F3F3); /* для Opera 11.10+ */ background: -ms-linear-gradient(top, #FEFEFE, #F3F3F3); /* для IE10+ */

Горизонтальное меню в ie8-

Задача: сделать приемлимое горизонтальное меню для браузеров, криво отображающих свойство display: inline-block;

Один момент вёрстки под iPad

Если указывается фиксированная ширина для документа, то она с паддингами не ложна превышать 980px..

Полупрозрачная подложка блока

.block{ background-image: url(data:image/png;base64,iVB.....); background: rgba(255, 255, 255, 0.35); }
И в файле для ie7-
.block { zoom:1; background:#fff; filter:alpha(opacity=50); } .block * { position:relative; }
вот сюда заливала п/прозрачную пнгшку 1-нопиксельную.
tnx