On the last post I had decided to do something I do occasionally, embed some thumbnails from the photolog in a relevant post. While I was writing the post I thought to myself, “Man this thumbnails are going to look funky, I should center them with <p align="center">.”
Blasphemy! I know. Forgive me, I was tired. Still, align="center"? That is so last decade. So I decided to give the paragraph a little class, postthumbs, which to me describes the content of the paragraph and is something I could see myself reusing. What follows is trying to add a little style to some simple thumbnails.
I’m a fan of the double border look for thumbnails, a thick white border surrounded by a very thin darker border. You see it done all the time, for example Rannie and Christine, but in both cases the border is actually part of the image itself.
This is cumbersome for several reasons. First, this may be geeky of me, but it seems like it’s violating the principle of separating content (the thumbnail or picture) and the presentation (the border). In addition this technique is rather inflexible. If Rannie decided tomorrow that he wanted orange and green borders instead of the white and black ones he has now he would have to regenerate every single thumbnail. Since I suspect both Christine and Rannie do this effect in Photoshop, this is a pain however you cut it, even with heavy batch action.
So the solution is CSS. If you remember the box model you’ll see that this effect should be rather easy. We can just put a background on the element and it will show through on the padding, then the border goes outside that, creating the effect of a double border.
How I do these sort of things is I create an HTML file on my desktop with the generated code from whatever page I’m working on and then I use it as the preview in the excellent TopStyle 3.1 so I can see whatever changes I’m making to the design live. In my opinion this is the only way to design with CSS. The only downside is right now I can only preview things in Internet Explorer because the Mozilla object it calls doesn’t seem to work quite right with 1.5 betas. However for most projects getting it working in IE first is the most realistic thing to do.
So let’s take a look at the code we’re going to be styling:
<p class="postthumbs"><a href="/p/9-9-2003/DSC06440"><img src="/a/9-9-2003/DSC06440.thumb.jpg" alt="The front of my new business card." /></a> <a href="/p/9-9-2003/DSC06439"><img src="/a/9-9-2003/DSC06439.thumb.jpg" alt="The back of my new business card" /></a></p>
So my first inclination was to apply the background and border to the anchors (the <a> element). After playing with the colors for a bit here’s what I ended up with:
.postthumbs {
background: #eef5c5;
border: 1px solid #e7f3a5;
border-left: none;
border-right: none;
text-align: center;
}
.postthumbs img {
padding: 6px;
}
.postthumbs a {
background: #fff;
border: 1px solid #cde44e;
}
.postthumbs a:hover {
border: 1px solid #8a9f18;
}
It did exactly what I was looking for in the preview, and it allowed plenty of flexibility and did exactly what I wanted to do. Let’s talk a little about what the above code does. The first class is for styling the entire paragraph, which fills up all the horizontal space available to it. The first rule gives the whole thing a background, the second rule puts a one pixel solid border on all sides, and then the third and forth rules remove the border from the left and right side. Finally we say to center everything. Occasionally I’m asked why I apply the border to all sides and then remove it instead of just having simply border-top and border-bottom rules. The simple answer is then whenever I changed the color or thickness or style of the border I would have to change it in two places, and this way I only have to change it in one place. I think it’s roughly the same number of characters too.
The second selector says that any images inside of anything with a class of “postthumbs” should have 6 pixels of space around it. Then the next two apply the white background and a border that changes when you hover over the anchor.
We’re done, right? Not quite. As soon as I loaded it up in Mozilla I noticed that the white background and border were, for lack of a better term, bunched up at the bottom. I suspect that for some reason that where Internet Explorer put the anchor “box” around the entire image Mozilla just put the box around what looked like where it would be if there was text there, so the font size (12 pixels) plus the line height. Generally in cases like this I assume Mozilla is right and IE is just being overly forgiving, so I find a workaround. I’d like to find the exact reason for this behaviour, but I don’t have a lot of time right now and the Mozilla Bugzilla interface is so painful.
So the previous method looks funky in Mozilla, but a solution quickly came to mind. If I put the padding, border, and all on the image then that should avoid all problems. I could even keep the hover psuedo-class on the image even though IE users wouldn’t see the effect. Here’s the final code:
.postthumbs {
background: #eef5c5;
border: 1px solid #e7f3a5;
border-left: none;
border-right: none;
text-align: center;
}
.postthumbs img {
background: #fff;
border: 1px solid #cde44e;
padding: 6px;
}
.postthumbs img:hover {
border: 1px solid #8a9f18;
}
As you can see this is a bit less verbose and generally simpler to understand. What we have is a consistent look in IE and Mozilla and enhanced functionality in more technologically advanced browsers, which is something I’m perfectly comfortable with.
In other news the links on the page are no longer bruised blue and purple, but rather some shades that I think match better. I’m a big fan of :visited link states as it can be very useful when browsing and is also interesting to see links you’ve already visited on other sites. I usually make visited links a little darker, which seems to delineate them clearly. Another common technique I’ve seen before is to not have visited links underlined, which I think is also nifty. However sometimes I see :visited states on site navigation, where it is nearly useless.
Navigation has started to flesh itself out, but it still has a long way to go. I’m going to have to reevaluate the site’s information architecture and reassess what sections could be combined and which need to be retired. There is also the question of what to do with all the contemporaria I kept in my sidebar before, and I’m not quite sure yet. I think maybe a nested sidebar that you can turn on but is off by default. I’m using these changes to give Dreamweaver MX 2004 a solid run-through and so far I’ve been very satisfied. It’s nothing revolutionary, and many of the new features they’ve been pushing don’t really appeal to me, but it has the polish of a mature product that I feel comfortable spending a lot of time in. I would have called it 6.5, but then again over at WordPress we put major functionality upgrades and changes in to hundredth point upgrades.
