I am in the process of refreshing an older website. I am trying to make
only moderate changes to avoid breaking some of the pages that have
unique elements.
The basic page has a 968px wide topContainer and container. I can style
them more or less separately from each other. The container is styled
with a full width 968 x 1px background gif image that creates a left
200px solid green sidebar (through repeating) in the company color and a
white background on the right for the content area.
I have put an HTML5 accordion menu in the topContainer with a green
background. As the user opens and closes the menu, it slides seamlessly
up and down the container sidebar and looks rather nice. I have not
completely finished styling this.
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:
One: make the container the depth of the deepest page, lock it to that
height and make another gif background with a gradient and use it full
height and width. Some pages that have a small amount of content are
going to look horribly unbalanced. I would say that about 1/3 of the
site's pages are like this. One page has a flash google mapping program
that will look very unbalanced if I take this approach. However, I do
need to have the shorter pages a bit deeper to accommodate the sidebar
accordion menu at it's full length. I don't think the container div
responds to changes in the topContainer element's depths?
Two: use css to create a gradient in a newly created 200px wide sidebar
in the container div.
I have found a website that helps the user create a CSS3 gradient and
provides the code. However, it looks like IE doesn't do well with this
and in fact they provide "if IE then" code that seems to reduce the
gradient to a solid color. Unfortunately my client uses only IE on their
desktop. There is no chance that they would consider any other.
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.
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/
