Смещение блока с margin: 0 auto; при разных разрешениях

[vasilek]

Есть проблема. Помогите, пожалуйста, если можете! Очень срочно. Уже несколько дней воюю.

На сайте должен быть полупрозрачный блок тянущийся на всю ширину экрана, но контент блока фиксированный на разрешение 1024

В FF и IE7 все хорошо, а в Opera и IE8 при изменении ширины экрана справа и слева от фиксированного блока появляются верикальные однопиксельные полоски, т.е. этот блок при разных разрешениях смещается из-за margin: 0 auto то вправо то в лево. Если фиксированному блоку поменять ширину с 998 на 997, то проблема пропадает в Opera и IE8? а появляется наоборот в FF и IE7.

Верстка сделана след. образом: в <div> с фоном ПНГ длиною 1920px (но центральная часть 998px вырезана) вложен <div> (margin: 0 auto) с фоном ПНГ ширина 998px.

html:

<div class="test">

<div>

Текст

</div>

</div>

css:

.test {

width: 100%;

height: 132px;

background: url('img/111_back.png') center no-repeat;

}

.test div {

width: 998px;

height: 132px;

background: url('img/111.png') no-repeat;

margin: 0 auto;

}

Посмотреть можно здесь http://test.stoff.in/

[hedgehog]

А зачем такие сложности? Отрезать кусок бекграунда и размножить его на весь блок ".test", а у ".test div" убрать фон вообще. В адекватных браузерах можно использовать rgba для задания полупрозрачного фона без картинок

background-color:rgba(0,0,0,0.8)

Edited May 28, 2012 by hedgehog

[vasilek]

1)Сайт дожен одинаково хорошо выглядеть как в адекватных так и в не очень адеватных браузерах.

2)Если Фон размножить на весь ".test div" (или оставить как есть), а для вложеноого div убрать фон, то когда при разрешении меньше чем 1024 (например 800) появится горизонтальн. скрол и если листануть вправо, то за пределами этого скрола справа вместо размноженного фона (или не размноженного) будет пустота - фон там исчезает (( Это не устраивает и с эстетической т.з. и с практической (белый текст там не прочтется).

Вот такая задачка. Все еще актуальна!

[hedgehog]

min-width для body никто не отменял. и незачем использовать <br /> для задания отступов. есть же margin-top

Edited May 28, 2012 by hedgehog

[vasilek]

min-width для body! Спасибо! :-*

<br /> не использую, это так, для теста, что б быстрее