Что является лучшим решением для получения кросс-браузерного макета, такого как (без Javascript), с падающей тенью слева и справа и гибкой по высоте?

Question

Я хочу сделать что-то вроде этого:

синий фон, с белым центром, с тенями слева и справа http://shup.com/Shup/368761/110521213922-My-Desktop.png

Должен быть легким и совместимым с IE6.

Answer 1

Вам нужно сделать все это в Photoshop. Создайте тени на расстоянии «0». Затем сохраните белый фон с тенью в виде PNG с прозрачным фоном. Тень исчезнет на фоне вашего тела. Это то, что мы сделали с нашим сайтом

http://infinitas.ws

EDIT:
Я пропустил IE часть

Полагаю, другой вариант может заключаться в том, что вы используете (синий градиент) в фоновом изображении и сохраняете его в формате JPEG. Это означает, что ширина вашего # Main-Wrapper будет равна ширине всего белого фона, а также тени и некоторого градиента сине-белого. Это будет сложно в CSS, потому что вы не можете повторить это вертикально из-за сине-белого градиентного фона.

РЕДАКТИРОВАТЬ РЕДАКТИРОВАТЬ:
Кроме того, вы можете использовать взлом IE, чтобы показать фон БЕЗ тени для всех, кто использует IE6, а затем использовать прозрачный PNG для всех, кто использует браузер, который стоит использовать.

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

Answer 2

Чтобы добавить к ответу «сделай это в фотошопе», альтернативным решением будет использование IE «исправить» PNG. Это позволяет полупрозрачным или прозрачным PNG-файлам работать в IE6. Это не идеально, но тестирование может показать, что оно соответствует вашим потребностям.

http://www.twinhelix.com/css/iepngfix/

Answer 3

Делаем это в Gimp или Photoshop.