I decided that adding borders to the images on my blog, would give the site a little face-lift, if not take at least 10 years off. I spent a little time researching how to do this, and even though it is quite simple, I figured it wouldn’t hurt to post what I found. I started by finding the img tag in my CSS file. Next, I added some margins and padding around my image, so that the text wouldn’t be aligned right up against it. Then I added my border attribute, picked a pixel size and color, so the end product looked like this:
a img {
margin: 5px;
padding: 5px;
border: solid 3px #E1D6C6;
}
Finally, I wanted to add a hover attribute when one of my images is linked. I used the hover psuedo-class to mimic the img tag attributes, but changed the hover color on the border:
a:hover img {
margin: 5px;
padding: 5px;
border: solid 3px #676E04;
}
Now, here’s one piece I still don’t understand. I saw another image tag in my CSS file, so I added the same type of attributes to it:
img {
margin: 5px;
padding: 5px;
border: solid 3px #E1D6C6;
}
I’m not sure why I need both tags, but it seems that I do. Without this img tag, my latest image post has a black border, but all the rest of my posted images have the grey border. Some research I’ve done shows it could have something to do with the difference in browsers, and that both tags are needed for stability across IE and Mozilla. If anyone knows the answer to this … please enlighten me!