Баги укр.нет
04 Mar, 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>
Отобразится без стилей примерно так:
Обычный список. Айди я проставил что бы убрать картинки гороскопных созданий в ЦСС. В принципе это было дело вкуса, можно было и оставить тэг ИМГ.
И в результате с помощью всего пары строк CSS:
ul.goro li{
width:127px;
height:40px;
float:left;
padding-left:28px; /* отступ для иконки знака зодиака*/
font-size:11px;
}
Теперь здесь мы видим таблицу 3 на 4, которая однако есть не что иное как обычный список. Который мне кажется гораздо ближе по смыслу.
7 комментариев к “Баги укр.нет”