cssing :: Архив :: Баги укр.нет

4 марта, 2005

Баги укр.нет

Решил описать некоторые глюки попавшиеся при разработке сайта укр.нет. Быть может кому то окажутся полезными. По крайней мере, мне - точно. :)
Вобщем смотрите по заголовкам - что интересует…

Не по теме: Еще пара постов со словом укр.нет в заголовке и надо будет себе почту поднимать на сайте. :)
Гугл траффиком обеспечит…

height:1% 0.1%;

Есть такой баг у ИЕ - 3px jog. Не буду точно описывать его тут.
Ну и разумеется как у каждого уважающего себя бага, у него есть своё решение. Которое называется звучно “Hollyhack” .
Там вы прочитаете подробнее, если раньше не знали.
Суть в том что там(в хаке) есть строка:

#hacked{
height:1%;
}

работает отлично и везде. Но.
Если блок который содержит этот элемент(#hacked) имеет большую высоту.
Например 10000 пикселей(много да?) как здесь http://www.ukr.net/?dir=topic&id=1(после обеда и до 12 часов ночи)
Вобщем ИЕ 5.0 считает этот один процент от этих 10000 пискелей и получается совсем не то что надо.
Простое решение поставить вместо 1% например .1% или .01%. Что и было добавлено как замечание на странице “Hollyhack“а.

Линукс и INPUT

Еще один баг мне подсказал некто Евгенией Шумилов, за что ему отдельная благодарность.
Баг заключается в следующем. Раньше на укр.нет была строка

<input id="search" .... size=”70″ />

Во всех системах отображалось примерно одинаково, даже во ФриБЗД. но вот в линуксе этого человека поле ввода было намного длиннее, что приводило к глюку части лэйаута странички. Уж не знаю с чем это может быть связано (настройки размера шрифта в системе?) Короче говоря самое простое решение это задавать его размер в пикселах. Тем более, как правило, резиновые поля ввода имеют мало смысла…(ИМХО)

#search{
width:440px;
}

И все нормализовалось.

Iframe

Все кто имел дело с рекламой в вебе понимают, как трудно на сегодняшний день избавиться от Iframe, хотя его и надо изживать.
Вобщем на сайте укр.нет есть два баннера, оба задаются через ифрэйм.
Тот что справа не доставил мне особых проблем.
А вот верхний в виде полоски…
По непонятным для меня прричинам этот верхний баннер сдвигал некоторые (не все!) блоки в правой(причем тут правая?!) колонке. И ничего с этим нельзя было поделать.
Есть ифрэйм - есть сдвиг, нет ифрэйма - нет сдвига. И никакие отступы не помогали.
Единственное что я придумал и что все исправило :

iframe{
position:absolute;
}

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

Замена заголовка на картинку

Для укр.нет я использовал примерно такой заголовок в коде

<h1>
 <a href="#">
  Ukr.net это - мой Интернет.
 </a>
</h1>

А для замены на картинку вот такой CSS код:

h1 a{
	background: #fff url(pic/ukrnet.gif) no-repeat 0 0;
	float:left;
	width: 175px;
	height: 54px;
	text-indent: -1000em;
	overflow: hidden;
}

Везде все отображается отлично. За исключением все тех же линуксоидов, они это видели примерно так:

Можно это считать даже не глюком а моим недосмотром, все исправляет строка:

h1 a{
	background: #fff url(pic/ukrnet.gif) no-repeat 0 0;
	float:left;
	width: 175px;
	height: 54px;
	text-indent: -1983em;
	overflow: hidden;
	text-decoration:none;
}

И все в порядке.

Гороскоп

Это не глюк, но просто мне очень понравилось моё решение этой маленькой задачи.
Гороскоп представлял собою раньше таблицу 4 на 3. Естественно таблицу я там допустить не мог - дело принципа :).
И как то само собой пришло следуещее решение. Оно почти очевидное, но мне все равно очень нравится.
Таблицу я заменил на вот такой код:

    <ul class="goro">
	<li id="aries"><a href="#">Овен</a>  <span>21.03-20.04</span></li>
        <li id="taurus"><a href="#">Телец</a> <span>21.04-20.05</span></li>
.................
	<li id="pisces"><a href="#">Рыбы</a> <span>21.02-20.03</span></li>
    </ul>

Отобразится без стилей примерно так:

• Овен 21.03-20.04
• Телец 21.04-20.05
• Рыбы 21.02-20.03

Обычный список. Айди я проставил что бы убрать картинки гороскопных созданий в ЦСС. В принципе это было дело вкуса, можно было и оставить тэг ИМГ.
И в результате с помощью всего пары строк CSS:

ul.goro li{
	width:127px;
	height:40px;
	float:left;
	padding-left:28px; /* отступ для иконки знака зодиака*/
	font-size:11px;
}

Теперь здесь мы видим таблицу 3 на 4, которая однако есть не что иное как обычный список. Который мне кажется гораздо ближе по смыслу.

XHTML/CSS, Полезности