Применение фоновых рисунков

Еще одним очень часто применяемым приемом является использование фонового рисунка. Причем я имею в виду не простой нейтральный фон, а сложное композиционное решение, когда изображение и фон активно взаимодействуют друг с другом. В этом случае возникает проблема точного совмещения изображений и корректного показа фона в обоих броузерах.

Точного совмещения изображений можно достичь, предварительно подготовив их в графическом редакторе и разместив один фрагмент изображения в качестве фона таблицы, а остальные фрагменты поместить в ячейки. Проблема с корректным показом фона в разных броузерах возникает в момент, когда мы используем таблицу более чем с одной ячейкой.

В общем случае проблема заключается в том, как ячейки наследуют фон таблицы. Internet Explorer просто рассматривает ячейки как прозрачные по отношению к фону и никак не изменяет внешний вид фонового изображения. А вот Netscape Navigator рассматривает фон в каждой ячейке как совершенно независимый от фона таблицы и в каждой ячейке прорисовывает фон заново. Это приводит к тому, что фоновое изображение в таблице коверкается невероятным образом.

Для обхода этой особенности NN фоновые рисунки в таблице нужно помещать не напрямую, а используя вложенные таблицы. Причем во внешней (я выделил ее зеленым цветом) прописывается адрес фоновой картинки, а во внутренней требуется в качестве фона указать пустой URL: <table background="picture.gif" width="368" cellpadding="0" cellspacing="0" ><tr><td> <table background="" width="368" cellpadding="0" cellspacing="0" > <tr> <td> </td> <td> </td> <td> </td> </tr> ... ... ... </table> </td></tr></table>

Отсутствие атрибута background во внутренней таблице NN воспринимает таким странным образом, что отказывается показывать фон, указанный во внешней таблице. И единственный способ борьбы с этим - именно пустой URL.

Ну, вот пожалуй, этой статьей мы и завершим небольшой цикл о совместимости броузеров. А в следующей статье мы поговорим о том, как красиво оформить таблицы.

Содержание раздела