I’ve been trying to get automatic image drop shadows via CSS enabled on this site, and I’m running into a roadblock.
I’m using the approach that a list apart recommends, and the problem is that while the drop shadows appear to work fine, text from ‘below’ the image insists on crawling up the page and snuggling up next to the image, completely destroying the effect. And no combination (that I’ve tried) of clear: left; or clear: right; or clear: both declarations, or paragraph tags or line breaks are able to force the text to not flow up beside the image.
Here’s the code from a list apart:
.alpha-shadow {
float: left;
background: url(‘/images/img/shadow1.gif’) »
no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}.alpha-shadow div {
background: url(‘/images/img/shadow2.png’) »
no-repeat left top !important;
background: url(‘/images/img/shadow2.gif’) »
no-repeat left top;
padding: 0px 5px 5px 0px;
}.alpha-shadow img {
background-color: #fff;
border: 1px solid #a9a9a9;padding: 4px;
}
I ought to be able to force the text not to climb up next to my image, but this is the result I am getting (see the highlighted area):
Not good. Anyone out there with any ideas? Let me know in the comments!