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

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

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/

Css Suxx