Блок div расширяется не до 100% ширины, а до ширины внутреннего дочернего элемента div

Кажется, у меня есть следующая проблема с CSS только в Firefox 3.0, Firefox 3.6. С более новыми версиями Firefox, например 3.6.6, мой макет работает нормально.

введите описание изображения здесь

К сожалению, я не могу загрузить полный снимок экрана. Вот код:

#header { width:100%; }
#header div.container { width:980px; margin:0 auto; }
#presentation { width:100%; background:red; }
#presentation div.bg { background-image:url(../images/img.png) no-repeat center top; }
#presentation div.container { width:980px; margin:0 auto; }

<div id="presentation">
<div class="bg">
<div class="container">
[content here]
</div><!-- end .container -->
</div><!-- end .bg -->
</div><!-- end #presentation -->

FF3.0 обрезает мое фоновое изображение, найденное в div.bg, до ширины div.container, несмотря на его родительский div, #presentation установлено на 100%, и только его дочерний div имеет ширину 980 пикселей. (нет логической причины, по которой мое фоновое изображение установлено на 980 пикселей)

Вроде бы только в FF. Chrome, IE и т. Д. Без проблем отображает мое фоновое изображение и ничего не режет.

Я пробовал: width: 100%, height: 100%, min-width, min-height для #presentation div, #presentation div.bg, overflow: hidden, html> #presentation, очистка div после #presentation или это внутренние дети.

Практически все, что я смог найти в Интернете.

Мой HTML-документ в основном проверяется с помощью XHTML Strict, за исключением нескольких ошибок, которые я должен сделать (div внутри UL) - ошибок, которые не находятся внутри div #presentation.


person Max    schedule 24.07.2011    source источник
comment
Нам тоже нужен HTML. Вы пробовали анализировать #presentation.innerHTML? Может дело в парсере.   -  person user123444555621    schedule 24.07.2011
comment
Привет. Я обновил свой предыдущий пост, добавив HTML-код для #presentation.   -  person Max    schedule 24.07.2011
comment
Пожалуйста, не используйте теги и спасибо в ваших вопросах.   -  person Lightness Races in Orbit    schedule 09.11.2011


Ответы (1)


Я думаю, это может быть связано с повторением изображения bg

вот как должно быть, кстати:

#presentation div.bg { width: 980px; background:url("img.jpg") no-repeat top center; }

Может быть, фон недостаточно большой и оставляет пустое место?

В зависимости от того, какое у вас изображение bg, вы можете использовать repeat-x вместо no-repeat


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

person Joonas    schedule 24.07.2011
comment
Привет. Я обновил свой предыдущий пост изображением, пытающимся объяснить мою проблему, и HTML-кодом для #presentation. - person Max; 24.07.2011
comment
Кроме того, удаление width:100% не работает. Я уже пробовал использовать min-width, min-height и т. Д. Единственный способ работать с шириной - это установить фиксированную ширину, например 2000 пикселей. Но я не могу этого сделать, мне не нужны полосы прокрутки. - person Max; 24.07.2011
comment
Я действительно не вижу проблем в коде. Почему бы тебе не установить такую ​​же ширину, как у обертки? или это плавная раскладка? - person Joonas; 24.07.2011
comment
Кажется, что код отлично работает во всех браузерах, кроме FF. Даже в IE6 работает нормально. Это плавный макет. Div #presentation должен быть гибким, поэтому для него установлено значение 100% (у него есть цвет фона). Div.bg внутри #presentation - это изображение, расположенное по центру макета. Div.container центрирует мой контент по моей общей ширине веб-сайта: 980 пикселей. - person Max; 24.07.2011
comment
@Max Одна вещь ... в .bg вы поместили background-image, но со значениями, которые вы указали, это должно быть background. Отредактировал ответ. - person Joonas; 24.07.2011
comment
Да, мне очень жаль. Я не копировал полный код CSS, но мой фоновый код: background:url(../images/bg-presentation-hp-w.png) no-repeat center top; }. - person Max; 24.07.2011
comment
что произойдет, если вы измените положение bg на top left - person Joonas; 24.07.2011
comment
Он по-прежнему обрезает изображение в той же позиции при переходе на top left, единственное, что изменило это положение моего изображения внутри div. - person Max; 24.07.2011
comment
На самом деле, не видя вашего кода, у меня нет идей. предоставленный вами код работает как шарм, предполагая, что изображение bg достаточно широкое. - person Joonas; 24.07.2011