Hi, 

I'm trying to create an elastic layout on this page:
http://eberkeley-dev.vcbf.berkeley.edu/ver07ajb/about_us/index.htm following
a variation of the directions found on this page:
http://www.pixelmeadow.com/blog/2005/05/26/elastic-faux-columns. (The author
of this article notes that he hasn't found a fix to the Safari bug I'm about
to describe, either.)

 

I am attempting to give my left navigation some color and at the same time
allow the navigation (& its background) to get larger when the text is
re-sized (e.g. be elastic) while the main content background remains white.
I am using the following code to do this:

 

#contentContainer {

            background: #C3D6EC url('../images/contentBg.gif') 10em 0
repeat-y;

}

 

.where contentBg.gif is an image large enough to cover the blue background
color (resulting in a white background for the content) 10ems from the left
no matter what the browser window size is. This apparently causes problems
in Safari (perhaps because of the horizontal size of the image) and has been
discussed here before:
http://archivist.incutio.com/viewlist/css-discuss/52388. In my case in
Safari the background color doesn't show up at all, I think because it is
being covered by the background image in an area where it shouldn't be.I can
actually see a flash of it before the page fully loads so I know the
background color *is* there.

 

Has anyone found a solution for this problem, or have one to suggest for me
in this situation?


Thanks very much, 

 

Allison Bloodworth

Principal Administrative Analyst

e-Berkeley Program Office

University of California, Berkeley

(415) 377-8243

 

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to