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

Спросите о чем я говорю? Ну например вам надо сделать меню-вкладки, пять штук, шириной по 20% от ширины контентной части. Думаете у вас просто так это получится? Фигушки. При наличии “лишних” пикселей, которые не вписываются по габаритам в эти 20%, они будут округляться. И каждый это сделает по-своему. Опера тупо их отбросит. ИЕ логикой не отличается, поэтому пикселей будет либо меньше чем надо, либо больше.

Пришлось мне воевать с таким проектом… Проблему решал через JS. Но это некошерный костыль.

Но способ есть (жаль что на тот проект нельзя повесить, ибо верстка уже вся готова, а переверстывать после кого-то мне жутко влом).

Недавно нарвался на статью (ссылку потерял), где показывался вариант верстки на “супер” отрицательных отступах. Предупреждаю – прежде чем применять такой способ – хорошенько обдумайте сетку сайта….

Итак приступим.

Имеем:

<div id="first">
	<ul>
		<li class="t1">tab</li>
		<li class="t2">tab</li>
		<li class="t3">tab</li>
		<li class="t4">tab</li>
		<li class="t5">tab</li>
	</ul>
	<div class="content">
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
	</div>
</div>

И стили к нему:

* {padding:0;margin:0;border:none;}
body {background: #363228;color: #8f866e;font: normal 62.5% Verdana, Arial, Helvetica, sans-serif;padding: 20px 50px;}
h2 {clear:both;font-size:2.2em;padding: 30px 0;}
ul {zoom:1;} /* for ie */
ul li {float:left;width:20%;padding:10px 0;text-align:center;font-size:1.8em;list-style:none;}
.t1{background:#eee}
.t2{background:#ddd}
.t3{background:#ccc}
.t4{background:#bbb}
.t5{background:#aaa}
.content {background:#fff;clear:both;padding: 30px 0}
.content p {margin: 0 30px 15px 30px;font-size:1.3em;}

В результате в разных брузерах табы либо меньше ширины, либо больше (в зависимости от разрешения).

Теперь чиним

#first {width:20%;margin:auto;}
#first ul {float:left;width:500%;margin-left:-200%;}
#first .content {width:500%;margin-left:-200%;}
* html #second ul {margin-left:auto;} /* for ie6 */
* html #second .content {margin-left:auto;} /* for ie6 */

И ура… все поровнялось.

Что мы в итоге сделали? Мы на начальном этапе сделали округление “левых” пикселей, задав ширину основного контейнера в 20%. А дальше просто вложенные элементы подогнали до нужной нам ширины и выдвинули отрицательным отступом в нужное нам место :). Естесно ИЕ6 нас послал и отрицательным отступом выкинул наш контент к черту на кулички, но без онного поставил как надо. Поэтому, сугубо для ИЕ6, две строчки отменяющие отрицательный отступ слева.

Уж простите если качество написания не сильно понятно, не мастак я много писать :).

Работающий пример можно посмотреть ТУТ .

Неужели свершилось? Нарыл на просторах сети:

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("Alternate name"), local("Alternatename"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }
@font-face {
  font-family: "Your italic typeface";
  src: url("type/filename-ital.eot");
  src: local("Alternate name"), local("Alternatename"),
    url("type/filename-ital.woff") format("woff"),
    url("type/filename-ital.otf") format("opentype"),
    url("type/filename-ital.svg#filename-ital") format("svg");
  }
h2 { font-family: "Your typeface", Georgia, serif; }
h2 em { font-family: "Your italic typeface", Georgia, serif; }
em { font-style: italic; }

и будет счастье шрифтов, которые хочеш, а не которые придется :).

зы: Стопудово не работает в Опере до 10й версии. ИЕ работают. Фокс выше 3 работает. Вебкитовские – аналогично.

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

Товарищ Маста скоро начнет требовать доп-плату за восстановление этого файлика :)

Замечен мелкий баг (или может я настока туп и не понимаю).
Конкретнее все в режиме отображения странички, а более конкретно – её фона.

в css имеем код

body {
background: #FFFFFF url(image.jpg) no-repeat fixed center;
}

Итак:

• fixed – запрещает фону скролиться с контентом (он всегда на экране)
• center – центрирует этот фон

засада в том, что раньше команда “fixed center” фиксировала фоновое изображение на странице и центр вычислялся стандартной формулой:

центр = (шир. видимой области - шир. полосы прокрутки) / 2

она в принципе так и вычисляется при отсутствии команды “fixed”.

body {
background: #FFFFFF url(image.jpg) no-repeat center;
}

Все ровно и красиво. Но при использовании кода первого варианта – цент вычисляется только относительно ширины видимой области без учета ширины прокрутки.

центр = ширина видимой области / 2

Мелочь, а мне гемора добавило… Второй день пытаюсь победить косяк.
Согласен, что для постоянного серфинга мало кто пользует бета версию фокса, но само наличие проблемы неприятно.