OK, I may have spoken too soon. Now that I see what's going on more clearly, I'm not sure if what you're shooting for can be done with css and HTML alone. It's possible I suppose, but perhaps not.
By that I mean the trick of getting things to line up as desired with only the dimensions of the image as a given.
Your two main problems there are:
- Lack of support for display table-cell in IE 7
- The nesting of these display table-cell elements in those browsers (IE 8+ and virtually all other modern browsers) that support it
IE 7 is in rapid decline, but I would hesitate to abandon it just yet, though that would be at your discretion and is not wholly out of the question. By not nesting, or not nesting so many of these display table-cell elements, perhaps creating more of them, and perhaps breaking the frame and matte images into their constituent parts and/or making them into sprites that don't resemble the finished look, something could be worked out. I really don't want to go down that road right now, perhaps Nile or someone else would.
One other issue is that the black matte has a flaw in its lower left corner that shows some gradient toward white that makes it unsuitable, so for it I've substituted the background color #121212, its predominant color.
This works in IE 7+ (at least IE 7 mode in IE 8) and presumably all others. It does require some calculation on your part as to the finished size of the feature and some calculations based upon that as to the sizes and positions of elements within. This could probably be done via javascript if the image size, offsets for frame and matte, the fudge factor of - 2 (see code for more explanation on that) and desired finished size of the feature were known.
The fairly well commented code:
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
/* In the below, 16px represents the width/height/offset required to
get things to line up. With different frames or mattes this may change */
.wrap, .frame {
position: relative;
width: 354px; /* dimensions of finished feature */
height: 253px;
background-color: white;
}
.wrap.black {
background-color: #121212;
}
.frame, .matte, .wrap img {
position: absolute;
}
.frame {
background: url(images/cherry-frame.jpg) no-repeat 0 0;
height: 16px; /* height of top and bottom frame elements */
}
.frame.rht {
right: 0;
}
.frame.bot {
background-position: 100% 100%;
bottom: 0;
}
.frame.rht, .frame.lft {
height: 100%;
width: 16px;
}
.matte {
background: url(images/white-matte.jpg) no-repeat 0 0;
height: 16px; /* height of top and bottom matte elements */
width: 322px; /* width of top and bottom matte elements */
left: 16px; /* left offset of matte elements */
top: 16px; /* top offset of matte elements */
}
.matte.rht {
background-position: 100% 0;
right: 16px; /* right offset of right matte elements */
left: auto; /* cancel left offset for these elements */
}
.matte.bot {
background-position: 0 100%;
bottom: 16px; /* bottom offset of bottom matte elements */
top: auto; /* cancel top offset for these elements */
}
.matte.rht, .matte.lft { /* dimensions for right and left matte elements,
height is height of feature minus 2 times height of offset - 2,
this -2 could change depending upon the matte */
height: 220px;
width: 16px;
}
.wrap img { /* center the image */
top: 50%;
left: 50%;
margin: -60px 0 0 -110px; /* negative half its height, negative half its width */
}
</style>
</head>
<body>
<div class="wrap black">
<div class="frame"></div>
<div class="frame rht"></div>
<div class="frame bot"></div>
<div class="frame lft"></div>
<img src="images/myimage-220.jpg" width="220" height="119" alt="myimage-220">
</div>
<p> </p>
<div class="wrap">
<div class="frame"></div>
<div class="frame rht"></div>
<div class="frame bot"></div>
<div class="frame lft"></div>
<div class="matte bot"></div>
<div class="matte lft"></div>
<div class="matte"></div>
<div class="matte rht"></div>
<img src="images/myimage-220.jpg" width="220" height="119" alt="myimage-220">
</div>
</body>
</html>
Even this would probably be easier to do with images for frame and matte broken up or made into sprites as mentioned for the original method. If you have questions feel free to ask.
Css Help to add matte and frame to image
I like Smilies 
Reply With Quote
Sorry for the confusion
Bookmarks