Делаем красивый горизонтальный разделитель (hr)

Делаем красивый горизонтальный разделитель (hr) Старый добрый horizontal rule (hr)
часто используется
для того, чтобы разделить контент в смысловом значении. Но также часто
он не очень хорошо вписывается в дизайн и структуру сайта. Именно
поэтому в нём уже давно не существует таких атрибутов как size,
color,
noshade,
align
и width.
 Все эти атрибуты — deprecated, и вместо них лучше
использовать таблицы стилей CSS.

Сразу начну с проблемы. Все дело в том, что даже самые последние
браузеры по разному воспринимают цвет разделителя hr,
заданный через CSS. Если обратиться к документации на сайте Opera, то
их браузером цвет определяется не свойством color,
а свойством
background.
Но на практике оказалось совсем по другому.
 Браузер Opera не окрашивается горизонтальный разделитель ни
через background,
ни через color.

hr {

 background
: #CCCCCC;

 color
: #CCCCCC;

 height
: 1px

 }

Из всего из этого Opera правильно распознаёт только атрибут
 height
: 1px .

Однако пару дней назад мне всё-так удалось закрасить горизонтальный
разделитесь в нужный мне цвет. Я сделал это через добавления свойства
border-top
:

код:


hr {

 height
: 1px

 background
: #CCCCCC;

 color
: #CCCCCC;

 border-top
: 1px solid #CCCCCC;

 }

Этот стиль работает правильно в Netscape
Navigator 6+, Internet Explorer 4+,  Opera 5.12 и выше. Что
касается Netscape Navigator 4.x,  то плевать он хотел на это
стилевое определение hr.

Ну всё, с CSS мы разобрались. Но я всё же решил поэкспериментировать и
закрасить горизонтальный разделитесь только с помощью HTML-разметки.
Приведённые ниже коды работают в очень широком диапазоне браузеров.

Что
хотим сделать:

С помощью одной только HTML-разметки вывести горизонтальный
разделитесь, который растягивался бы на всю ширину окна, был высотой в
один пиксель и имел серый цвет.

Решение первое:

Код:

<table 
border=»0″
width=»100%» cellpadding=»0″ cellspacing=»0″>

 
<tr>

 
  <td 
height=»1″ bgcolor=»#CCCCCC»
nowrap=»nowrap»>

 
      <spacer type=»block»
height=»1″
/>

 
   </td>

 
 </tr>

</table>

Решение второе:

Код:

<table
border=»0″ width=»100%» cellspacing=»1″ cellpadding=»0″>

 
 <tr>

 
    <td
bgcolor=»#CCCCCC»>

 
       <table
cellspacing=»0″ cellpadding=»0″
border=»0″>

 
         
<tr>

 
           
 <td></td>

 
         
</tr>

 
       </table>

 
    </td>

 
 </tr>

</table>

Решение третье:

Код:

<table
width=»100%» cellspacing=»0″ cellpadding=»0″
border=»0″>

 
 <tr>

 
    <td
bgcolor=»#CCCCCC»>

 
       <img
src=»/img/null.gif» width=»1″
height=»1″ alt=»»
/>

 
    </td>

 
 </tr>

</table>