Думаю многие, кто верстает, сталкивался с проблемой округления процентов при верстке резиновых сайтов. Учитывая, что только 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, две строчки отменяющие отрицательный отступ слева.

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

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

Возвращаясь к вопросу о открытии новых окошек при клике на ссылку.

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

Следовательно и такое понятие как “target” отпадает :).

Но тем не менее периодически приходится это пользовать... Например для непереубедимых клиентов :).

Как известно девелоперам, на данный момент такой параметр как target=”_blank” не является валидным по спецификации XHTML. Данный момент каждый обходит по своему.

На мой взгляд наиболее простым и гибким вариантом является небольшой скриптик:

function externalLinks() {
  if (!document.getElementsByTagName) return;
  var anchors = document.getElementsByTagName("a");
  for (var i=0; i<anchors.length; i++) {
    var anchor = anchors[i];
    if (anchor.getAttribute("rel") == "external") {
      anchor.target = "_blank";
      anchor.className = "out";
    }
  }
}
window.onload = externalLinks;

И сответственно ссылка должна иметь вид:

<a href="url" rel="external" class="out">Ссылка</a>

Но при этом мы содаём класс в css ( a.out ), и навешиваем на него стиль, который нам нравится. У меня например это иконка :)