Well, I have designed a sister implementation for this that uses a table (still validates as strict, though). It has only one minor drawback in that it currently requires one use of the proprietary css expression property for IE 7 to get the height of one of the cells to come out right in that browser. This of course requires javascript enabled, as does the filter workaround for older IE browsers that we already have on your version, and that I am still using for those browsers. I take these (javascript enabled) requirements for IE browsers as not too serious, but wonderful if they could be avoided.
On the plus side, with the table you can adjust the width in just one place in my setup and the rest will just all fall into line. You can even use percentage or em units for the width.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.shadow_box {
width:60%; /* All you need to adjust in most cases */
margin:20px auto;
table-layout:fixed;
border-collapse:collapse;
border:none;
}
.shadow_box td {
padding:0;
margin:0;
}
.l_top, .r_top {
width:8px;
height:1px;
}
.top {
height:1px;
}
.tr_side {
width:8px;
height:8px;
background-image:url(tr_shadow.png);
}
.r_side {
width:8px;
background-image:url(r_shadow.png);
}
.l_bot {
width:8px;
height:8px;
background-image:url(bl_shadow.png);
}
.bot {
height:8px;
background-image:url(b_shadow.png);
}
.r_bot {
width:8px;
height:8px;
background-image:url(br_shadow.png);
}
.content {
vertical-align:bottom;
}
#content_1 {
background-color:#add8e6;
padding:1.5ex;
text-indent:1.5em;
border:1px solid gray;
margin:0;
}
</style>
<!--[if gte IE 7]>
<style type="text/css">
#ie_side_1 {
height:expression(document.getElementById('content_1').offsetHeight-8+'px');
}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css">
.shadow_box {
filter:progid:DXImageTransform.Microsoft.Shadow(strength=7,color=#636363,direction=135);
position:relative;
}
.tr_side, .r_side, .l_bot, .bot, .r_bot {
background-image:none;
}
</style>
<![endif]-->
</head>
<body>
<!--[if lt IE 6]>
<center>
<![endif]-->
<table class="shadow_box">
<tr><td class="l_top"></td><td class="top"></td><td class="r_top"></td></tr>
<tr><td class="content" colspan="2" rowspan="2"><div id="content_1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum non tellus nec justo suscipit tincidunt. Cras a eros sed metus pretium posuere. Fusce auctor, nulla in semper ullamcorper, mi lorem ullamcorper augue, ac nonummy nisl leo ut lorem. Morbi ut ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sed nunc eu turpis consectetuer aliquam. Proin a magna. Cras eu tortor. Praesent mi arcu, interdum vel, venenatis placerat, eleifend eget, mauris. Fusce commodo. In vehicula vulputate augue. Sed ac nulla a turpis adipiscing viverra. Fusce sit amet pede a arcu fermentum nonummy. Vestibulum quis magna et turpis eleifend bibendum. Aliquam dapibus. Integer porttitor, tellus at convallis rhoncus, tortor dolor volutpat eros, vel fermentum tortor augue ac neque. Pellentesque nunc turpis, adipiscing sit amet, venenatis quis, tempus a, enim. Etiam vitae augue. Praesent ante elit, cursus vel, mollis in, sollicitudin at, ipsum.
</div></td><td class="tr_side"></td></tr><tr><td class="r_side" id="ie_side_1"> </td></tr>
<tr><td class="l_bot"></td><td class="bot"></td><td class="r_bot"></td></tr>
</table></body></html>
I've switched to using classes as well, to allow multiple drop shadows on a page. Each one on a given page would require two uniquely id'ed elements, as shown in the above to get the IE 7 kludge for the one td's height that I mentioned to work out individually for each implementation.
Reply With Quote
Originally Posted by wattersisere
Bookmarks