PING Css / Web Gurus. Background image / floaty div / transparency problem.

[Yossarian]

Hi All,

I am working on a site just now and I want to use a fancy border that our art team has designed.

The border is built from a top section, a 1 pixel high mid-section that I use as a background to allow the border to scale with content and a bottom section.

The way they've drawn the bottom section requires me to float the bottom image up so that there isn't a huge gap between the bottom of the content and the bottom border image.

When I float the bottom image up though, the transparent areas of it allow the 1 pixel high 'middle border' to show through.

I don't know if this is clear in text - so please have a look at my two examples.

With the bottom image sitting naturally after main content, the site looks like this:

http://paidiasoftware.com/borderproblem/example1/

When I shove the bottom image up to make it fit snugly with the main content, i get this:

http://paidiasoftware.com/borderproblem/example2/

Can anyone think of any way that I can move the bottom border image up (by about 100->120px) but not have the side-bar 1px border image showing through?

I can get the designers to remove the transparent areas but this obviously hurts the look.

You can view source from the links above.

Cheers!

David

[Yossarian]

Simple fix. Obvious in retrospect (as usual!)

For anyone interested, you just give a negative margin the div above the bottom image.


http://paidiasoftware.com/borderproblem/example3/

[Passacaglia]

Css Suxx