Background images breaking up in IE

[trenton]

Hi

I'm using background images to create curved boxes. There's 5 images in total - 4 corner images and one 'dot' that's repeated along the horizontal and vertical edges. There's 8 divs - one for each corner, one for the top and bottom (repeated horizontally), and one for the left and right (repeated vertically).

In IE the borders for some of the boxes have gaps in them and I have no idea why. You can see this in action at: http://www.programmersheaven.com/csstest/display5.html.

Any ideas?

[Caterwomtious]

Looks like it might be the peekaboo bug at work, so you could try the solutions offered at that link.

I reckon you could fix it by making it simpler though - rather than the single pixel GIF, use a CSS border for the box:

border: 1px solid #000

and keep the graphics for the corners. So long as your corner graphics have white backgrounds rather than transparent, it should work fine - and you can lose the extra divs.

You need an apostrophe after "programmers" btw - as you have done in your title tag.

[trenton]

Thanks, Rick. A quick

position:relative; top:0;

seems to have done the trick!