3 ms·

Hmm, messing around with this at the moment. Your test case works in IE 7 (fired up VMWare to give it a spin -- noticed my example code actually doesn't, but t

by wheels 17y ago

Hmm, messing around with this at the moment. Your test case works in IE 7 (fired up VMWare to give it a spin -- noticed my example code actually doesn't, but the real widget does), but I still haven't gotten it working with real images. I'll update here once I see if I can get that going. As an addendum, in the non-contrived case (the one the widget actually uses) it also allows text to spread beyond the width of the image above it unless it's on the extreme edges; I haven't yet thought through if that'd be possible with this or using td spacers with a little extra finageling. http://blog.directededge.com/wp-content/uploads/2010/04/recommendations-test-shop.png http://blog.directededge.com/wp-content/uploads/2010/04/reco... Note the Coffee > Everything label. Edit: Reason it wasn't working in IE 7 was because I didn't add a doctype and it dropped into quirks mode.

Groxx 17y ago
I quite doubt there's a way to do overflowing text like that with only CSS without nastiness. Though, someone, correct me if I'm wrong; I'd be fascinated to learn how, if it's possible. With images, I've managed this: http://dl.dropbox.com/u/363028/temporary/justify_images.html http://dl.dropbox.com/u/363028/temporary/justify_images.html Though it's giving me a 4px taller container for the images than is needed :\ (forgive me if I'm missing something obvious there) It works on Safari 4 w/o the widths or the height, too, all that's needed are justify, inline, and that spacer (nice catch, that). edit: via browsershots: http://browsershots.org/http://dl.dropbox.com/u/363028/temporary/justify_images.html http://browsershots.org/http://dl.dropbox.com/u/363028/tempo... looks pretty consistent, for the most part. Probably breaking on inline-divs where it's failing. (and Opera is the only top-aligning one...? maybe that's a user stylesheet issue.)
- mikepurvis 17y ago
  You can do the overflowing labels by given the label box a negative left and right margin. Or a negative right margin and a corresponding relative position. Of course, this gives you no guarantee that there wouldn't be two overlapping labels in adjacent products. To test for and prevent that, you would still be on the hook for some JS, but it would be much simpler than the JS that's already in place. Basically just some jQuery to step through the pairs of adjacent objects and check the overlap of the internal spans containing the text.

by wheels 17y ago

Groxx 17y ago

I quite doubt there's a way to do overflowing text like that with only CSS without nastiness. Though, someone, correct me if I'm wrong; I'd be fascinated to learn how, if it's possible. With images, I've managed this: http://dl.dropbox.com/u/363028/temporary/justify_images.html http://dl.dropbox.com/u/363028/temporary/justify_images.html Though it's giving me a 4px taller container for the images than is needed :\ (forgive me if I'm missing something obvious there) It works on Safari 4 w/o the widths or the height, too, all that's needed are justify, inline, and that spacer (nice catch, that). edit: via browsershots: http://browsershots.org/http://dl.dropbox.com/u/363028/temporary/justify_images.html http://browsershots.org/http://dl.dropbox.com/u/363028/tempo... looks pretty consistent, for the most part. Probably breaking on inline-divs where it's failing. (and Opera is the only top-aligning one...? maybe that's a user stylesheet issue.)

mikepurvis 17y ago
You can do the overflowing labels by given the label box a negative left and right margin. Or a negative right margin and a corresponding relative position. Of course, this gives you no guarantee that there wouldn't be two overlapping labels in adjacent products. To test for and prevent that, you would still be on the hook for some JS, but it would be much simpler than the JS that's already in place. Basically just some jQuery to step through the pairs of adjacent objects and check the overlap of the internal spans containing the text.