W E B - анатомия // CSS

Новая версия сайта находится по адресу

wa.artel.by

Статья написана by FireFalcon. Все права защищены.

Тут как-то мне письмо пришло. Просили помочь с фоновым изображением. Не центрировалось оно в Netscape, хоть тресни ;) Эту проблему невозможно решить лишь средствами CSS, потому как с фоном Netscape работает просто отвратительно. Вот и поговорим подробнее про свойство background. По порядку.

background-image

Navigator 4.0x и 4.5 некорректно распознают URL. Относительный URL берется относительно HTML-файла, а не относительно CSS-файла. Эта проблема возникает, если стили подключаются к страничке тэгом <LINK>. Выход очень простой, надо использовать абсолютные пути или следить за тем, чтобы HTML-файлы были в той же директории, что и CSS-файл.

background-position

Navigator 4.0x и 4.5 вообще не поддерживают это свойство.

background-attachment

Navigator 4.0x и 4.5 вообще не поддерживают это свойство. В Explorer 4.0x понимает это свойство только в том случае, если оно применено к тэгу <BODY>.

background-repeat

М-да. Вот тут-то багов выше крыши. Постараюсь объяснить. Возможные значения:
background-repeat: repeat
IE 4 повторяет фон только вправо и вниз. Т.е. если вы центрируете фон с помощью background-position, то IE размножит фон только вниз и вправо, вместо того чтобы размножить еще и вверх, и влево. В NN этой проблемы нет по той простой причине, что он не поддерживает свойство background-position.
background-repeat: repeat-x
IE 4 повторяет фон только вправо, вместо того, чтобы повторять и вправо, и влево
background-repeat: repeat-y
IE 4 повторяет фон только вниз, вместо того, чтобы повторять и вниз, и вверх
background-repeat: no-repeat
Особых проблем мной не замечено. Однако, чтобы NN 4.x правильно понял это значение, необходимо фоновое изображение прописывать с помощью CSS, а не напрямую в тэге <BODY>

background-color

В Navigator 4.0x и 4.5, примененное к блоковому элементу (например <P>), раскрашивает фон так, словно это инлайновый элемент. Т.е. фон окрашивается только под текстом, а не всем блоком. Однако, если прописать border: none - баг исчезает.

	P {background-color: red}
		Решение:
	P {background-color: red; 
		border: none; }

Вопрос, по-видимому, исчерпан...