A Real153 style panel.
On my company's muck about website, they have some psudo-3d style buttons. I thought that I'd try and make something which works the same using normal CSS borders, and some absolute positioning.
The page works by having two images inside a div which contains all of the content. This div has a position of absolute, which basically means that any positioning of the two child images will occur relative to the div, and not the body or html element.
From there, it's just a matter of tweaking the positioning of the two images, so that the sit exactly on the border around the
As usual, IE and Gekko disagree about the positioning of these images. The behaviour for background tiling is very strange, and use of a dased border can hilight this. Below are three screengrabs from Opera 7, IE6 and Mozilla 1.4, respectively. All look similar, have a width and height of fifty pixels, a dashed border of five pixels and a non-repeating background image. Note that the image begins when the border ends, in the top right corner.
With the width and height removed, IE repositions the background image so that it is obscured by the border. As the containing div in this page has no width or height explicitly stated, then the positioning of the two images within it is quite diferent in IE.
Try resizing this page.