Hey all, first post and I'm asking for help. Who would'a thought?

I've looked and looked for a solution for this problem myself, but I'm stuck, so I'm putting out a call for help! Hopefully I can visualize this for all of you.

Basically what I'm building for my Wordpress installation is a photo blog. On the main page is one post with the full-size image, but I was hoping for a specific border around it. One that overlays the corners of the image.

Here's the mock-up in Photoshop:



The key is the little white overlays in the corners of the image, and this is the part that's driving me nuts.

The image width (800px) is the same for all images, but the height of the photo may vary, requiring the solution to be vertically scalable. Absolute positioning would easily allow those PNG corners, but from what I can tell, absolute is impossible because you never know where the bottom of the image will be.

So the way I've structured it is that I have a PNG (frametop), and the image has white padding with a black border on it's left and right. This is the "frametop" (Gray is transparent).



So the output from my XHTML and Wordpress is basically "frametop" followed by the photo.

My first idea was to set the proper z-index for the two images to have frametop on top, and then use a negative margin on the photo to move it up and underneath the frame-top.



Unfortunately, the photo is always on top of frame_top and so the little corners are never seen.

When my code is interpreted I'm assuming that it doesn't realize that the pictures might be overlapping and so it ignores the z-index.

One experiment I tried was to "float:left" the photo. It resulted in this:



I don't understand that at all. I've tried toggling it to see what is actually changes, but the only thing that appears to move is the width of the whole thing. Very strange. How can the photo+padding expand a pixel, especially when the width of the "wrapper" is 820 pixels? I've measured the output in Firefox and it's 821 pixels. The wrapper for everything is 820?!?

Anyways...

So, I'm at a loss! I just want little white corners over my photo!

z-index doesn't apply to non positioned elements.
http://www.w3.org/TR/CSS2/visuren.html#z-index

You could move the border image down with 'position: relative, top: ?px' instead and you don't need z-index. The border will be on top anyway since it's positioned and the image it's overlapping is not.

Sweet Christ! That's incredible! What an elegant solution to a long question. Thanks.

Man, while I was thinking about this, I was thinking, hmmm.. there should be some way to use positioning here. I should have sat down and reviewed the different methods.

Thanks again!