Generally I do try to keep image decorations to a minimum, but sometimes that little bit extra can help bring an image to life. Features such as a simple border or subtle drop shadow can really enhance an image.

Similiarly with images that are hyperlinks, we can’t expect to use javascript to change the image on a rollover, or create a sprite for every single image. CSS can provide an alternative to this issue with simplistic image rollovers.

I have created examples of 6 different techniques achieved with CSS that can help to enhance your image.

1.   Outside Border
2.   Drop Shadow
3.   Outer Glow
4.   Outer Glow With Border
5.   Rollover (Opacity)
6.   Rollover (Outer Glow With Border)

Click here to view the source and see these examples is action.

Now this Julia, had sent an email to Raul, clearly in an attempt to squeeze just a tad bit more dollars from Raul’s ever so squeezable wallet. Basically this email went like this…

Microsoft IE8 release

With the recent release of Microsoft’s new browser, IE8, it has brought to light that websites previously designed for IE7 and older versions will render incorrectly in the new IE8.

… blah blah blah …basically meeting IE7 needs and not industry standards.

The websites I am monitoring for you, ??? and ??? both require Style sheet adjustments (CSS) and possible page templates to make them compatible in IE8.

I can offer you 2 solutions,
1. A “quick fix” for both sites which would force IE8 to render its content as IE7 internally from the page templates. This would take approximately 2 hours total.
2. Amend the CSS (Style Sheets) and affected page templates to industry standards on both sites. This would take approx 6 hours total for both sites.

… blah blah blah Regards, Julia.

Now you’re probably thinking that, yes, this email is correct about the potential rendering differences, although solution 1 is a bit expensive for a copy and paste job. To some extent I agree, but then I hear that due to the fact “IE7 needs and not industry standards,”  Julia has taken down both of Raul’s websites until the CSS has been fixed. What a joke!

Due to some minor CSS differences between browsers, Julia has attempted to force Raul to hand over some extra pennies, claiming that the site will not work until it has been fixed.

Above: The Real Raul Julia

I immediately told the salesperson to get Raul on the phone to Julia and make him put the site back up immediately, which he then did, but I just couldn’t believe it. I mean, imagine that, upselling every client in your database between 2 – 6 hours of work everytime a new browser is updated or released. Firefox 3.0.12 was just released a few days ago, now… if I play my cards right I could have a lot of work coming up.

In reality, there are two sides to this story, both of which are dependent on your target audience.

If you have a website that is not necessarily designed for a general target audience, say a website where usually only designers may visit, support for IE6 may not be necessary at all. This is due to the fact you are expecting your visitors to be up to date and anyone who isn’t most likely would not be the type of visitor you expect to stay and explore or convert.

On the other hand, if you are developing for a corporate client who sells products online, or depends on their website for a steady stream of income, no doubt the client is going to want as much traffic and conversions as possible. You cannot rely on every user having the most up to date browser, if they are unsure how to upgrade and we want to make a conversion, then it is our responsibility to make it work given what they have.

Personally, I don’t think IE6 is that bad.

Its true IE6 is outdated but I believe designers and/or developers just love throwing around how much IE6 sucks to show they “know what they are talking about.”

I can honestly say I do not run into many issues whilst developing for IE6. I have spoken to developers, who believe an entirely new stylesheet is required while developing for IE6, and I find myself dumbfounded as to why, or how, they can run into so many problems. The main issue I tend to face is a margin/padding issue which can be easily modified with a few additional lines of CSS.

The above CSS would overwrite that particular style for the element. In this case h1. This VERY easy fix, as well as many others which help make development for IE6 almost as simple as most other browsers for all website designers.

The most used reset I have run into is something similar to this…

… and this is around half of it.

It frustrates me when I am working with an existing webpage and someone has implemented so many resets. I find myself wasting time to define styles that should have never been reset in the first place. I do not see the point in resetting so many elements, if so few are actually affecting the layout. Looking at the example provided above, I do not see why there could possibly be the need to apply a transparent background, 0 padding, and 0 border to a strong, em, strike etc.

Now I know some people are going to be thinking “Hey! I include ‘blah’ to make sure that ‘blah’.” NO! I won’t bite.

Can anyone honestly tell me they have run into an issue where their strong element suddenly has 10px padding? Or for some strange reason your em tag has miraculously vertically aligned to the top? Never has anything like this happened to me and until it does I see the better part of the reset CSS to make the author feel “pro.”

As I said at the beginning, I do use a CSS reset. This reset will cover most the same bases as the lengthy css above… but this way is much simpler and hasn’t let me down yet.

I know it isn’t perfect, but I’d rather reuse code that I can actually remember off the top of my head.

Give it a try, I’m sure you won’t be disappointed, but if you are… you’re more than welcome to go back to your 50 lines of CSS, before you even start your new webpage.