The metadata overall sets the area, the metadata-label moves the text to the right, and the image then floats to the left. The problem is that there's not really a decent way to adjust for the fact that metadata images are inconsistent -- you can have what looks like anywhere from little 16x16 gifs up to some fairly big images. I don't know the overall limit, the range is pretty wide.
Given the variation possibilities, I would suspect that without a whole LOT of tweaking, there'll always be someone on your flist whose mood-images break the style. So probably is best to go with a new div for that -- and better yet if the div is outside the metadata ul, like prefacing it or suffixing it, just so the image can then be manipulated fully independently of the metadata:ul chunk.
no subject
.metadata {margin: -40px 0 0 -160px;}
.metadata-label {margin: 0 0 0 90px; }
.metadata img { margin: -20px 0 0 0; float: left; }
The metadata overall sets the area, the metadata-label moves the text to the right, and the image then floats to the left. The problem is that there's not really a decent way to adjust for the fact that metadata images are inconsistent -- you can have what looks like anywhere from little 16x16 gifs up to some fairly big images. I don't know the overall limit, the range is pretty wide.
Given the variation possibilities, I would suspect that without a whole LOT of tweaking, there'll always be someone on your flist whose mood-images break the style. So probably is best to go with a new div for that -- and better yet if the div is outside the metadata ul, like prefacing it or suffixing it, just so the image can then be manipulated fully independently of the metadata:ul chunk.