Just fooling around testing drop shadows – will try using them floated to the right now and then. The theme of this post is drop shadows via CSS and cute cat photos are obligatory for examples. So, with any luck, wa-la!
Why? Well, some bloggers like to use small thumbnails floated to the right instead of to the left, especially if there’s some theme or product information they are discussing in the body of the post. And ***Dave is having some display problems with right-floated images in IE7, although his blog looks great in Firefox and fine in IE7. Blogula doesn’t look so good in IE6, but that doesn’t matter so much to me.
So here is a first attempt at right-floated drop shadows, using my own CSS as a template.
UPDATE: Working, but really does need a bit more margin between the text and the left edge of the image. Also, really helps to use correctly formatted HTML – this is why I put that stuff into quicktags. And OOH, YUCK: when viewed in IE7, the shadow image is part of the entry, and the actual image is floating on TOP of the entry but attached to the right margin, which probably is the reason for the scrollbars. This doesn’t happen when floated to the left in the normal way. I wonder if it is because of the PNG image, which is replaced by a GIF for older versions of IE? IE7 still doesn’t recognize the
display:inline-table;
attribute… a little Googling is called for.
This thread describes the exact problem ***Dave and I are having. Further hacking with IE7 may be called for, but since it only messes up with right-floated images, I may apply a completely different, non-shadowed right float method there. After browsing a lot of sites and help fora, I’m even more convinced that there’s a hell of a lot I don’t know or understand about how CSS works and how things can get messed up in IE6 and IE7.
UPDATE II: Going back to the archives for the “old” way I used to float images left and right to see how they might look in IE7.
I won’t be able to check how they look in IE6 until I get back to work next week… yes, we’re still using IE6 at work, I don’t know if or when our IT people will get around to updating the system. And yes, I’m doing this while on vacation, we’re taking a Geek Break day here and we’re currently watching a rerun of CSI: NY. Because that’s how we roll. So this is the right-floated image version.
Thanks for the diagnostics, Ginny, esp. whilst off in Paradise. (We’re headed off to KauaÊ»i ourselves, to Po’ipu, after Christmas to do a big anniversary celebration for both sets of parents.)
We’re still on IE6 in our office, officially (I use Firefox, except on a handful of programs that are coded with ActiveX controls).
So I’ve frelled things up (IE7-wise) by floating all of the columns of the blog at variable width? If I made them fixed width (or at least the main column) would all be well?
Okay, the original on Amazing Grace has #content float:left. I tried changing it width:80% to width:590px (the original) but that still comes up funky.
I suppose, in the interim, I can just push images to the left. That’s annoying, though. I’m sure I would be more driven to do something about it if I used IE7 more …
Ida Know, Dave, I seemed to have frelled things up just fine here just by making a img-shadow-right floated CSS class. I didn’t modify my CSS any other than changing the float to the right side. I think it may have something to do with the #content float.
But since I would only rarely need to use a rightward float, I’ll do without the shadows on anything I float to that side.
Maybe I should take the President’s advice and go back to school to actually learn this stuff correctly, eh?
What? And betray a grand tradition of screwing around with things until they break, and then screwing around with them until they un-break? Inconceivable!
Years of helpless flailing have given me plenty of experience screwing around with things until they break, and then some more until they un-break.
I’m breaking the break/un-break cycle now, here, today, and leaving well enough alone.
Hmm, the right-floated images seem to look okay in IE8, but of course at work we’re still on EYE-YEE SIX.