[thelist] CSS background positioning and link borders

Gregory Wostrel info at gwcreative.com
Tue Feb 24 12:34:00 CST 2004

On Feb 24, 2004, at 9:47 AM, Stephen Caudill wrote:

> 1. removing "fixed" from the .sidebar class keeps it relative to
> the column, not the view port.  I got closer results to what you
> were looking for also, by exchanging "right" for "left" in the same
> class.  This is what my rule looked like:
> .sidebar { background: #ccc url(swoosh-background.gif) no-repeat right 
> bottom; }

after fussing with this a little bit (what you suggested worked pretty 
well and the "fixed" thing was what was giving me a fit and I didn't 
realize it) I realized that fixing it to the viewport really was what I 
wanted to do. So I redid the graphic and did this:
The swoopy bit shows more, even with a small browser window and it 
stays in place. It seems to work out pretty well on IE/PC as well 
except that IE6 incorrectly (I think) fixes the graphic to the column 
and not the viewport. My client is on a Mac/OSX, as I am, so it helps 
that it works fine in Safari, too.

But then I started to play with it a bit and did this:
which makes the swoopy bit much more prominent and it mimics some of 
the design on the company's letterhead - good deal. But what a mess in 
IE/PC. Rather than fixing to the viewport with the same relationship so 
that the graphic appears seamless, it is a real mess.
Screenshot for those without 

It works OK in mozilla (Firefox) except on the PC the entire sidebar 
goes missing! Sheesh!
Can't do anything fun.

Gregory Wostrel

gw at gwcreative.com
Communications and the Art of Simplicity

More information about the thelist mailing list