I'm trying to follow the onion skin drop shadows from A List Apart, but I'm using it in an image gallery where I'd like each div centered within a list item. The problem is that these divs are set to float: left so that they shrink down to the contents of the div. I don't want to manually want to set the divs, and I don't want the divs to be aligned left. Inline-table works.... only ie5/mac, safari, and opera... so as usual I gotta get IE working, but Firefox too, for a change.
So again, is there another way to make a div shrink to its contents other than float: left, and displaying as an inline-table?
Here's the relevent css:
.wrap111 {display: inline-table; background:url(images/shadow.gif) right bottom no-repeat;}
And the relevent html:
<ul>
<li style="width: 200px;">
<div class="wrap111">Content this div should shrink to.</div>
</li>
</ul>
Thanks!
