Someone fixed it for me in the CSS styles.
This was the fix:
I saw the sticky so I investigated. The broken top and bottom each have 3 table cells - left corner, gap, right corner. The problem is that in Google Chrome, Apple Safari and probably others (I think any which use
WebKit to render the HTML), the content of the main page changes the width of the corner cells from the defined 17px to something random. I tried figuring out what exactly was pushing these cells wide but I couldn't find any reliable cause so I think it's a bug in WebKit's rendering, which in turn means we're pretty much stuck. So, I looked at it another way - plaster over the glitch.
The fix is in the CSS for each of the corner cells. At present, the CSS is like this (top left shown):
.outter-tl-corner {
width: 17px;
height: 16px;
background-image: url(http://www.site.com/forums/styles/images/tl.gif);
background-repeat: no-repeat;
}The fix involves putting the actual curve image to the edge and filling the blank area with white so it looks the same:
.outter-tl-corner {
width: 17px;
height: 16px;
background: #ffffff url(http://www.site.com/forums/styles/images/tl.gif) no-repeat left;
}
.outter-tr-corner {
width: 17px;
height: 16px;
background: #ffffff url(http://www.site.com/forums/styles/images/tr.gif) no-repeat right;
}
.outter-bl-corner {
width: 17px;
height: 16px;
background: #ffffff url(http://www.site.com/forums/styles/images/bl.gif) no-repeat left;
}
.outter-br-corner {
width: 17px;
height: 16px;
background: #ffffff url(http://www.site.com/forums/styles/images/br.gif) no-repeat right;
}This has no visible change in Firefox 3.0.8 or MSIE8 as the entire cells are filled with the curve image - as they should be.
