Вероятно, многие знают несколько громоздкий код скругления углов текстовых блоков:
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 (вообще говоря, мой хомяк, на котором я ставлю всякие страшные опыты )
Запланированное отображение:
Искажение:
Спецдефект появляется в Internet Explorer 6 и 7. Чем больше контента на странице, тем выше верятность его появления, но иногда на одних и тех же страницах его нет.
Итак, можно ли исправить такой баг без применения графических уголков? |
зочем столько мучений, дождись CSS3 