IE7 / Firefox Comparison

Notice in the image below how IE7 (and IE6) adds a gap in between the image and the element beneath it, whereas Firefox (end any other half decent browser) does not.

The Cause

This is generally caused by line breaks in your code such as the following:

<div id="sidebar">
<a href="event.php">
<img alt="View Upcoming Shows" src="image/cta-upcoming-show.jpg">
</a>
</div>
<!-- some other element here -->


The Cure

But we don’t want to put those 3 lines of code on one line now do we! We want to keep our code nice and readable. So all we need to do is add one tiny piece of CSS to our stylesheet:

#sidebar img {
display: block;
}

There we have it! No more strange gaps around images in Internet Explorer. Here how it now looks in the unholy Internet Explorer:

Ok you got me, that was just the Firefox image from before with the IE logo layered over it! But it does work, trust me

Keep in mind that you shouldn’t overuse these techniques otherwise your designs may get a bit predictable. Also these tips will not necessarily work in every design, make sure you use them appropriately otherwise they may just look really out of place compared to the other elements on the page. Enjoy!

Overlapping

I’ve been using this method a lot in some of my most recent work as I find it can add a lot more depth to even the most basic of designs. It’s implementation will vary depending on how your website is coded, but you can generally make it happen by using large background images as well as using separate backgrounds for both the html and body element. Below is an image of one of my clients’ websites without any use of overlapping:

At the minute the layout of the webpage looks a little mediocre, it’s obvious that the header is separate to the rest of the page beneath. Let’s see how it looks if the girl is bigger and overlaps the header:

Much better! Now that the girl image overlaps the header it’s hard to tell where the header ends and where the rest of the page begins. You can use this technique as a way of blending elements together, as can be seen in a lot of print design and magazines. Overlapping is a method that is often unexplored in some peoples web designs, but it’s not actually that hard to pull off!

Leading

Pronounced ‘ledding’, this is the method of editing the amount of space in between each line of text on your page. A common mistake of many inexperienced designers is not to take leading into consideration, which can lead to really unattractive and hard-to-understand content. Leading can be edited easily using the CSS property; line-height. Let’s see some sample text where the leading is left to the browser’s default value:

Urgh! Not very nice at all. Who’d want to read up on the history of tin-openers if it used styling like THAT! Let’s add the following to our beloved CSS:

line-height:1.75em;

What a difference that’s made, if it was in a language I could understand then I’m sure whatever it says would sink in much easier.

Kerning

This affects the spacing in between each letter and can be edited using the letter-spacing CSS property. I only tend to edit this in heading elements due to their increased font size. Using this technique will generally depend on how the rest of your design looks so it isn’t right for every occasion. See a heading without the letter-spacing altered:

That heading looks okay (and will be fine for a lot of designs), but we can always edit the letter-spacing property to give it more of an impact. We only need to add a tiny negative value to bring the letters closer together as the letter-spacing property appears very sensitive when using em’s, so make sure you have the supervision of an adult for this bit:

letter-spacing:-0.075em;

See how the space between the letters has been reduced? This can look very cool when used appropriately.

Rather than adding a negative value to the CSS, you can always add a positive value to increase the kerning like so:

letter-spacing:0.075em;

However, I don’t think I’ve ever needed to use the property in this way as I generally don’t like this sort of kerning (in the content for a website anyway).

Indented borders

This will literally take a matter of seconds and can often make various elements a lot more interesting on a webpage. See below for a sample of an average looking navigation bar, with the border-color property set to #31660c:

We can add a nice little touch by altering the border colour of the other side of each element:

border-left:#31660c solid 1px;
border-right:#90b840 solid 1px;

This will give an indented look to the list items in the navigation, how very tasty:

Don’t forget you can use this technique on all sorts of elements not just navigation lists. Why not live life really dangerously by experimenting with indented borders on images and content areas too!

Double Borders

This is especially useful when dealing with image galleries as it can help to contain each thumbnail, rather than just having the images exposed on their own:

We can use some really simple CSS add a double border to make the images stand out a bit more, and to show that they are clickable:

background:#e1e1e1;
padding:5px;
border:#6d6d6d solid 1px;

To properly show that the images are clickable you should edit the hover pseudo class so that its colour changes to your liking:

#featured-items a:hover {

The End

I hope you’ve found my first proper blog post useful, any feedback is appreciated so feel free to leave a comment!