Nora Brown Design

What Web Designers Do: Deal with browser differences

One of the things I grapple with frequently as a web designer is differences between browsers. Different web browsers may make web pages not only look different, but also behave differently. It can be a time-consuming process to track down where the differences stem from, and come up with a solution.

A visual example

Here is a recent example which demonstrates the different capabilities of different browsers. This first image below is what one page I built looks like in Safari. It looks largely the same in Firefox and Chrome as well. Check out noraville.com for yourself.

The second image, below, shows what that same page looks like in Internet Explorer 7. Notice the dramatic differences: the boxes are opaque, with square rather than rounded corners; the text is black rather than subtly shaded; the alignment and style of the text is off.

In this case, I don’t much care about IE7, because this page is aimed at a specific audience who are much more likely to be using one of the better browsers. But were this page for a client, I would have to spend a good deal of time creating background images and extra code to get the page to look similar in IE7.

The page looks a little better in the most recent version of Internet Explorer, IE8.

A behavioral example

I am currently working on a site for an architect, which involves using Javascript to add enhanced interaction to the page, including image zooming and a slideshow. It was all working beautifully in Safari, Firefox, and Chrome, but when I tried the page in IE7, it basically failed to function at all. I managed to track down the problem and find a work-around, but it certainly added to the development time and cost.