MyMans

#replacement-1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(img.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

проверено на FF Safari Opera Chrome ie6-8

Небольшая хитрость с тегом hr. Если применить к нему стиль вроде этого,

.L{
 width: 90px;
 height:15px;
 background-color: #c6d3f4;
 border: 0px solid white;
}

выясняется что во всех браузерах он показывается нормально, и только в IE 6 по краю продолжает выделяться серая рамка, даже не смотря на указания border как вот на этот скриншоте.

Как выяснилось это лечится. Надо добавить color

 color: #c6d3f4;

после этого серая рамка становится того же цвета что и фон и перестает быть заметной.

Все мы ждем мультиколоночность. Для этого в CSS3 введено много вкусного,

column-count:  <int>
column-gap:  <length> | auto
column-width:  <length> | auto

но, не дожидаясь принятие CSS3, мозильци поддержу мультиколоночнисти в Firefox используя спец префикс -moz- в стилях,

-moz-column-count:  <int>
-moz-column-gap:  <length> | auto
-moz-column-width:  <length> | auto

и как водится дурной пример оказался заразителен для ребят из Apple

-webkit-column-width: <length>;
-webkit-column-gap: <length>;

Это, как вы уже наверно поняли, были стили под Safari.

Как бы быстро все браузеры не поддержали css3 или используя теги FF и Safari, надо обратить внимание на одну штуку. Разделять на колонки не всегда обязательно через column-count, конечно вы можете обозначить числом нужные вам колонки, но можно делать и по другому. Если указать только параметры column-width и column-gap то браузер сам поделит пространство на колонки. Например, если div шириной 400px и ты ставим column-width:100px и column-gap:20px то колонок будет 3. Уменьшите ширину в column-width и количество колонок увеличится

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

<a class="button" href="#" onclick="this.blur();"><span>MyMans</span></a>

Зачем здесь onclick? Потому что IE не возвращает изменения active на которое вешается дизайн

a.button {
    background: transparent url('bg_button_a.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px;
    text-decoration: none;
}
a.button span {
    background: transparent url('bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}
a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* спрятать оконтовку в Firefox */
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* приспустить текст на 1px */
}

Затем нам нужно два имиджа

для того что бы в итоге получить вот это

Существуют ведь разные источники отображения страницы; экран, принтер или wap, и не везде элементы этой самой страницы обязаны выглядеть одинаково

<p><span class="upd">Обновлено</span> в 10:32</p>

На экране компьютера можно заменить слово Обновлено картинкой

span. upd {
 background:url(tick.gif);
 margin-left:0.5em;
 text-indent:21px;
 position:absolute;
 overflow:hidden;
 width:20px;
 height:19px
}

А для wap используем форматирование по проще

span. upd {
 color: green;
 font-weight: bold;
}

Отображение практически все страницы на разных устройствах можно менять целиком. Стили эти можно подключать отдельно.

<link rel="stylesheet" type="text/css" href="s.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="p.css" media="print"/>

А можно прямо на странице

<style>
@media screen{
body {font-family:verdana,sans-serif; font-size:14px}
}

@media print{
body {font-family:times,serif; font-size:10px}
}
@media screen,print{
body {font-weight:bold}
}
</style>

Мы не бедем зжать милости от консорцума пока они утрердят градиентный текст и сделаем его сами

Что нам для этого нужно. Вопервых сам текст.

<h1><span></span>MyMans</h1>

во вторых css

h1 span {
	background: url(gradient-glossy.png) repeat-x;
	position: absolute;
	display: block;
	width: 200px;
	height: 30px;
}

Так как у нас PNG для браузеров IE ниже версии 7 используйте обходной css c fixed ie png

Раньше inline-block не поддерживался в Firefox для этого приходилось использовать display: -moz-inline-box; о чем писалось здесь, но в Firefox3 раработчики решили вернуться к стандартом и можно будет смело использовать inline-block в css как впрочем и inline-table

Firefox как известно поддерживает закругленные края прямо в css. и происходит это в результате правила

-moz-border-radius:10px;

или

-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;

Как оказалось Safari не отстает от него и его правила выглядит так:

-webkit-border-radius: 10px;

или

-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;

Неплохой скрипт, подгружает методом DOM + JS файл со стилями.

function includeCSS(css_file) {
	var v_css  = document.createElement('link');
	v_css.rel = 'stylesheet'
	v_css.type = 'text/css';
	v_css.href = css_file;
	document.getElementsByTagName('head')[0].appendChild(v_css);
}

Далее для вызова можно сделать так.

<a href="#"
   onclick="includeCSS('newstyle.css');return true;"
   >Сменить стиль</a>

ДА! это ответ на вопрос который возникает первым, да, все меняется на лету