Баги укр.нет

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 комментариев к “Баги укр.нет”

1.ilya shvets | 14 Mar, 2005
сильно. Пиши еще
2.bodq | 20 Apr, 2005
imho не очень умно берешь mozilla firefox , заходишь на ukr.net, view->text size->increaze (или crtl-+) раза три -- и всё поехало.. почему так делать? например у меня плохое зрение, и я иногда увеличиваю размеры шрифтом на страничке... так что кг/ам получается :(
3.akella | 20 Apr, 2005
То что "все поехало" во первых слишком смелое замечание, во вторых нажмите 4 раза. :) В третьих самое главное что там нужно читать это НОВОСТИ. Это не контент ресурс что бы делать такое ударение на читабельность увеличенного текста. А будь он таковым я бы уделил отдельное внимание читабельности увеличенного варианта. И хотя в принципе не очень трудно исправить те немногие "поплывы" я все же не вижу для этого сколько-нибудь серьезных причин. Если уж так припекло можно всегда отключить стили и читать страничку в каких только вам взбредет в голову шрифтовых настройках, причем НИЧТО и НИКОГДА там уже не поплывет. Это я предусмотрел. Это скорее привычка оставшася от долгого использования таблиц. Которым суждено умирать к моему великому счастью. Так что я думаю К не Г и А не М. Мне вообще кажется оно абсолютно неуместным в данном контексте. Если у вас есть что возразить пишите.
4.Ш_фь | 29 Mar, 2005
здорово
5.akella | 09 Jan, 2008
Да, дизайн сайта с тех пор изменился( и не сохранился у меня. суть все равно осталась. Скажите какая именно ссылка вас интересовала, и я постараюсь восстановить. Все - слишком много (
6.xoro2007 | 09 Jan, 2008
невозможно зайти выдает другую стр.
7.INOZ | 16 Dec, 2008
Как я понимаю, xoro2007 имел в виду ссылку на гороскоп. Нынче она такая: http://horo.ukr.net/