Sitestuff: WordPress 2.3, CSS woes and Amazon in your face


One of the most memorable quotes from Tim Burton’s Batman is Jack Nicholson as the Joker declaring “This town needs an enema!” Though the Clown Prince of Crime certainly had sinister designs on Gotham, he had a point: the city was a mess and needed a thorough cleansing. His choice of words may not have appealed to those of a delicate and genteel nature (who would likely have preferred “facelift” or “makeover” to the vulgar colonic), but the idea has always resonated with me and it springs to mind anytime I see something that is clearly in need of change.

I’ve often felt that the phrase applies to this very website, both in terms of content and design.

Content-wise, I’d like updates to be more consistent, preferably at least one new post every weekday and perhaps a single post over the weekend. Of course, there’s more to blogging than just establishing a posting schedule, because no one is going to care that I’m posting regularly if I’m not posting anything interesting; which begs the question: what do the people who read this blog find interesting?

As an example of something potentially uninteresting, I offer up this very post. I like to keep the meta-blogging (or “blogging about blogging”) to a minimum here and leave it to folks like Lorelle VanFossen, who meta-blog far better than I ever could (or would want to). My meta-blog posts tend to center around whatever issues I’m currently experiencing with WordPress and such; I don’t do advice. When I do dip my toe into meta-blogging, I do so with the understanding that—unless you’re a WordPress user (or a huge dork)—the excursion isn’t going to be terribly interesting, but I also do it knowing that the process of writing helps keep the gears turning in my head and there are a few people reading who do blog with (or without) WordPress and muck around with CSS and web design, and they’re likely to provide some very insightful feedback.

Content is far more important than design and aesthetics, but over the past few days I’ve been very focused on the look and feel of this site. I upgraded to WordPress 2.3, which had some unintended consequences, specifically in the areas of commenting and post tags, but I think I’ve taken care of those. Digging through the site, however, made me realize that I’d like to spruce things up a bit (the Library page is in dire need of an overhaul, for instance, and the Now Reading section in the right-hand sidebar could be cleand up), take care of some browser-dependent design quirks, organize things a bit better and maybe cut some of the extraneous bits.

I spent an absolutely stupid amount of time last night going through old blog entries (I’m about a third of the way done) and making sure that the markup for images and footnotes was consistent (and adding images to some movie review posts that didn’t have them); the idea is to create a consistent look across the entire site, but also to make switching to a new theme easier, should I ever decide to stop using Brian Gardner‘s Blue Zinfandel.

Unfortunately, despite a lot of CSS tweaking and web searches, I was unable resolve a browser-specific rendering problem: Internet Explorer versions 6 and 7 both have issues with floating images. The IE screen shot below illustrates the problem: the text immediately beneath the Transformers movie poster image (which is “floating” on the left of the center column) should be to the right of the image and wrap around as it flows beyond it. Firefox renders it properly but neither version of Internet Explorer does.

Internet Explorer Float Issue

The problem is very likely something to do with floating images within floating sections or visible overflow or something, but I haven’t been able to nail it down yet and it’s pretty annoying; especially since I’m almost positive that it was working properly in the past.

Finally, there’s the new “Currently Playing” and “Recently Watched” sections on the left-hand sidebar. The former was blatantly stolen from Greg Howley (though Rob Miller deserves some credit, too, as his Now Reading plug-in set me on the “media I’m consuming” path in the first place) and the latter was an obvious extension of the idea. Neither of them are plug-ins (though that could change), and they originally featured just cover images and titles. However, converting them to Amazon links has removed some of the hassle of maintaining them: I don’t have to hand-write the HTML or host the images myself. I’ve been embedding my Amazon Associates ID in DVD, book and video game links for over a year now, but this is the first time I’ve used the Buy Now button, something I’ve been avoiding because I don’t want the site to feel like an ad (don’t worry, I don’t plan to start using Google AdSense anytime in the foreseeable future).

So there you have it: I’m feeling a little restless about the current state of and I want to shake things up a bit. I welcome your suggestions and feedback and appreciate your patience if I somehow manage to break the site while I’m fiddling.

5 responses to “Sitestuff: WordPress 2.3, CSS woes and Amazon in your face”

  1. Jason Penney Avatar

    If it makes you feel better I still need to upgrade. I started work on a new theme last December. Oh, and I need to post more, better stuff.

    Feel free to steal any ideas you like from my Library page.

    Your floated item is inside your paragraph and it seems something is causing IE to clear between paragraphs. Move your ‘img’ tag outside your ‘p’ tag (let’s see if I screw this up):

    <a title="Transformers" href="[snipsnip]" rel=lightbox[pics654]><IMG class="imageframe imgalignleft" alt="Transformers" src="[snipsnip]"></a>
    <p><em><STRONG><A href="[snip]">Transformers</a></STRONG></em>

    Hope that helps.

  2. KJToo Avatar

    Thanks for the advice, Jason. I had wandered down that road myself, but was stymied by the fact that WordPress is handling all of the <p> tags. There’s no way for me to tell WP not to put a tag prior to the image, and if I manually add one after the image the paragraph that results is placed below the image. Quite frustrating, as you can imagine.

  3. KJToo Avatar

    Aha! I managed to defeat WordPress by placing a dummy <div> around the image. I’m not sure how that’s going to affect Firefox, though.

  4. Jason Penney Avatar

    In that case you might just want to float the div itself, rather than float the image.

    I run the X-Valid plugin and have all the WordPress auto-stuff disabled with another plugin.

  5. KJToo Avatar

    In that case you might just want to float the div itself, rather than float the image.

    I run the X-Valid plugin and have all the WordPress auto-stuff disabled with another plugin.

    I may have to do something along those lines, as I’ve found that adding the <div> moves the text up, but still doesn’t handle the wrapping correct in IE. Joy!

Leave a Reply

Your email address will not be published. Required fields are marked *