Градиент css3 и body

[chiffenok]

Мне нужно сделать градиент у body. Я хотел сделать его с помощью css 3, он проблема в том что body(да и тег html) у меня занимает высоту окна браузера(это не мешало пока не стал задавать градиент), а не всю высоту сайта из-за возникает картинка ниже, после пракрутки(красный цвет использован для наглядности), как растянуть body в данном случае? не хотелось бы использовать картинки

css код для градиента

body{
    background-repeat: repeat-x;background: -moz-linear-gradient(top, red 0, #ffffff 400px, #ffffff 100%);
    background: -webkit-linear-gradient(top, red 0, #ffffff 400px, #ffffff 100%);
    background: -o-linear-gradient(top, red 0, #ffffff 400px, #ffffff 100%);
    background: linear-gradient(top, red 0, #ffffff 400px, #ffffff 100%); 
}

сайт

http://jsfiddle.net/MRWBT/ (без картинок но не суть)

ps подвал лепил к низу страницы довольно известным методом в инете http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ , может в нем проблема?

Edited March 29, 2012 by chiffenok

[alexandr_v-vich]

Часто сталкивался с этим. Кажется это проблема боди. Выход знаю только через общую обёртку (див с height: auto;).

Может и есть более правильный вариант, но я как-то не встречал такого)...

Edited March 29, 2012 by alexandr_v-vich

[Radiocity]

http://jsfiddle.net/MRWBT/ (без картинок но не суть)

Да, проблема с body и градиентами имеется. Однако, в Вашем случае она решается довольно легко, так как используемая методика верстки позволяет задать градиент для i_wrapper.

http://jsfiddle.net/Radiocity/MRWBT/53/

Edited March 29, 2012 by Radiocity

[chiffenok]

ваше решение задать градиент для i-wrapper точно не подходит)) вы посмотрите градиент растянулся токо на ширину врапера а надо то на все окно

придется задать дополнительный div как предложил alexandr_v-vich

[Валенсий]

Использую в ячейке таблицы фильтр Gradient, чтобы градиент отображался в старых версиях IE.

Вот фрагмент кода:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFCC', endColorstr='#DDD8B3',GradientType=0); /* IE6-8 */

При этом в старых IE пропадает рамка ячейки таблицы (т.е. видимо градиент закрашивает ячейку вместе с рамкой). В других браузерах всё ок. Подскажите, пожалуйста, как решить проблему.

[chiffenok]

оригинально где вы там таблицу увидили?

[Валенсий]

Я применил этот фильтр к ячейке таблицы.

Вот так, если хотите:

td {
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFCC', endColorstr='#DDD8B3',GradientType=0);
   }

[mrnobody]

А если вместо height: 100%; поставить min-height: 100%; у body & html?

http://jsfiddle.net/MRWBT/59/

Edited May 29, 2012 by mrnobody

[chiffenok]

Я применил этот фильтр к ячейке таблицы.

Вот так, если хотите:

td {
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFCC', endColorstr='#DDD8B3',GradientType=0);
   }

я не пойму где вы там таблицу увидели? макет сверстан на дивах

потом filter для ie токо

[Валенсий]

я не пойму где вы там таблицу увидели? макет сверстан на дивах

потом filter для ie токо

Короче я не про ваш случай пишу. Я просто тут влез со своей проблемой, и у меня таблица. Извините.

Edited May 30, 2012 by Валенсий

[clavin]

Как с обёрткой всё и получается. Посмотрите этот код и заметьте, что градиент (который указан для обёртки .i-wrapper) я увеличил и он может практически растягиваться на всю высоту страницы, до самого низа.

Решение такое: надо ставить общую обёртку для всего контента - для шапки, футера и всего остального. Он растягивается вместе со всем контентом внутри него. Поэтому и градиент будет один и он будет растянут на высоту всего сайта.