Проблемы с фоновым изображением для создания тени в макете CSS

Question

Я изучаю учебное пособие, как создать фиксированный табулированный макет CSS, начиная с кода Photoshop и HTML + CSS.

Это последний пример предложил бушель учебник (как это должно выглядеть в конце):

http://www.html.it/articoli/1688/template/11-css.html

и это моя личная версия предыдущего шаблона: http://onofri.org/example/WebTemplate/

Как вы можете видеть, что у меня есть некоторая проблема в Firefox с левой тенью левого столбца (с другими браузерами у меня есть другие проблемы)

Как и в примере шаблона, я создал это sh adow, установив bgpage.gif immage в качестве фона в #container DIV и положить его на правой части DIV:

#container { 
    /* consente di posizionare un elemento al centro del suo contenitore (non tutti i browser la supportano) */ 
    margin: 0 auto; 
    width: 770px; /* Imposto la larghezza */ 
    background: url(../images/bgpage.gif) repeat-y scroll 103% 0 transparent; 
} 

Почему в примере предложенного учебника хорошо работать и в шахте не работают?

Кто-то может помочь мне решить?

Tnx

Andrea

Answer 1

Хм, я думаю, что вы имеете в виду, как тень между боковой и левой содержание не отображается.

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

Чтобы исправить это, вам нужно будет использовать свойство CSS clear, которое пример учебника реализуется с помощью стилизации элемента #clearer.

Итак, добавьте в ваш CSS:

#clearer{ 
    clear:both; 
    visibility:hidden; 
} 

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

Если это не то, что вы искали, не стесняйтесь, дайте мне знать, будем рады помочь вам дальше. Удачи!