On Sun, Jan 29, 2012 at 9:09 AM, PL <[email protected]> wrote: ... > I would like to make this sidebar a bit more interesting by adding a bit of > a gradient below where the menu's deepest position is. I immediately > realized that using a 968 x 1px gif was not going to work because the the > height of the container is variable depending on the content. > > I have two choices: ... > Two: use css to create a gradient in a newly created 200px wide sidebar in > the container div. > ... > Is there another way to accomplish a variable page height gradient using CSS > that would work with IE? If you have seen a page that does this, a link to > the page would help me study how it is done.
IE supports gradients through the non-standard CSS property "filter": http://msdn.microsoft.com/en-us/library/ms533754.aspx Here's an example that should work for you cross-browser: background-color: #3D6554; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#3d6554', EndColorStr='white'); background-image: -webkit-gradient(linear, left top, left bottom, from(#3d6554), to(white)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #3d6554, white); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top, #3d6554, white); /* FF3.6 */ background-image: -ms-linear-gradient(top, #3d6554, white); /* IE10 */ background-image: -o-linear-gradient(top, #3d6554, white); /* Opera 11.10+ */ background-image: linear-gradient(to bottom, #3d6554, white); */ Most of that (except for the last line) came from css3please.com For your needs, I don't recommend adding a new block for the gradient. Instead, apply the gradient properties to the #container div and set the background-color of the content div to white. For more robust CSS3 support, I recommend taking a look at CSS3PIE. It implements a lot of CSS3 features through an Internet Explorer behavior and VML code. -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com > Here is my test page (which will be in a constant state of change and the > junk at the bottom is a goner). > http://www.broadstonere.com/index_test_4.php > Thank you, > Patrice ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
