html/css graphic alignment to background

ok, working on a site that has a repeating angled striped background, a square content area is centered on the page and has rounded corners and a light drop shadow. i've managed to get everything aligned in the header and content areas using css positioning for the background (centered at top and then repeats) but the problem happens when i hit the bottom of the content area:



I'm having a hard time getting this to line up correctly, since the content area varies it may or may not line up with the background. i tried a transparent gif but the shadow doesn't correctly mesh with the background if i go that direction. one thought is to set a fixed height for the content area and use css to scroll within it, but even doing that the bottom edge seems to fall at different places in IE than it does in Firefox. any ideas? thanks.

chris

Use a .PNG so you have variable transparency. And there is a hack to make it work in IE.

thanks dek, several people have suggested that, i'll have to look more into it and how PNG handles transparency differently. in the short term i took the easy way and set the table as a fixed height so it always lines up, then set a CSS scrolling property so the content will fit inside.

chris

avoid the position attribute like a disease; that's pretty much what it is. it auses more problems than it solves. use floats and margins instead.

#wrap {
width: #px;
margin: 0 auto;
}

will be centered in the middle of the screen no matter what happens, as long as you keep the auto for the left/right margins.