VPF::Круглые уголки: баг - Форум программистов

Rivelt_Silverbeast

Дата 3.7.2007, 19:42 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 4.2.2007

Репутация: нет
Всего: 1

Вероятно, многие знают несколько громоздкий код скругления углов текстовых блоков:

HTML-код:

Код


<table width="100%" bordercolorlight="silver" cellspacing="0">
<tr>
 <td class="toptable" valign="middle" align="center" onmouseover="this.style.background='white';" onmouseout="this.style.background='silver';">
   <a href="index.php">
   <div class="container1">
     <b class="rtop">
       <b class="r1" id="r10"></b> <b class="r2" id="r20"></b> <b class="r3" id="r30"></b> <b class="r4"  id="r40""></b>
     </b>
     <div class="container" style="height:1.5em;">
      Содержание блока... 
     </div>
      <b class="rbottom">
       <b class="r4" id="r50"></b> <b class="r3" id="r60"></b> <b class="r2" id="r70"></b> <b class="r1" id="r80"></b>
     </b>
   </div> 
   </a>
 </td>
...далее некоторое количество похожих тегов td.. 
</tr>
</table>

В файле стилей:

Код


/*rounded corner; source created by Alessandro Fulciniti*/
b.rtop, b.rbottom{display:block}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #014}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
.container{background:#014;}
td.container{height:1.5em;}
.container1{margin:0;}
.topimg{filter:glow(color=silver, strength=5);height:19px;}
a.toplink{color:silver;cursor:pointer;}
span.toplink{position:relative;top:-3px;}
a.toplink:hover{color:white;}

Источник:
http://www.html.it/articoli/nifty/index.html
Отличия - в нескольких новых классах стилей (изменение цветов), и (что существеннее) в заключении таких блоков в таблицу.

Пример страницы, свёрстанной с помощью такого громоздкого кода:
http://rivelt.jino-net.ru (вообще говоря, мой хомяк, на котором я ставлю всякие страшные опыты smile

)

Запланированное отображение:
user posted image

Искажение:
user posted image

Спецдефект появляется в Internet Explorer 6 и 7. Чем больше контента на странице, тем выше верятность его появления, но иногда на одних и тех же страницах его нет.

Итак, можно ли исправить такой баг без применения графических уголков?

Octane

Дата 11.7.2007, 23:54 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 14.5.2007
Где: Волгоград

Репутация: нет
Всего: нет

Ужос

зочем столько мучений, дождись CSS3 smile

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

В прикрепленном файле примерчег как это фсе просто делается в css3, работает пока только в фф2 smile

Присоединённый файл ( Кол-во скачиваний: 3 )

css3.zip 2,12 Kb

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »