When developing your website, you will need to check them in different internet browsers. Each browser will take your code and render it differently.

Scripts that you write in HTML or CSS can have a different impact on the website design. While IE will display text cleaner, Chrome and Firefox are closer to the W3C web standards.

These browsers are the most used and you may see them render your website differently. With browser compatibility testing you can make sure you site will look the same in any browser.

Mobile device layouts are now a must for any website. Using a responsive design will keep your website in sync.

CSS In Different Browsers

When coding your web design in CSS you will start to recognize some of these issues. The margin command for instance. Having a 0 margin or having a 10px margin can display differently in browsers.

Padding can also play a different role in web development. There are some instances you can have padding: 5px. But the spacing in one browser can be different in another.

CSS Reset

One way to get these to have the same result in your different browsers is to use a CSS reset file. This file will set all HTML attributes to nothing. Everything will have 0 margins, 0 padding, nothing.

When you have everything start from 0, it gives all internet browsers a starting point.

One drawback of using a CSS reset file is it does set everything to default barebones. You strong and b won't have the font-weight:bold attribute. Your italics won't have font-style:italic. And all your headers (h1, h2, h3, h4, h5) will be the same size.

It may take a little more time to set the global attributes to you liking. But in the long run of a big site, I recommended using one.

Example CSS Reset File

Download Example

Typography Rendering

Watch your typography. Text can render different with other browsers. In some cases, text can look perfect in one browser and blurry in another.

Try to find a font that looks acceptable in different sizes and font weight. Having blurry or unreadable text on your website can make your visitors leave.

Watch which font you're are choosing. If you choose a font that isn't on your visitors computer, the computer will just choose one for you. This could cause text sizing issues and could break the layout of your site.

Here is a list of safe fonts you can use for a Windows and Mac operating system.

• Andale Mono
• Arial
• Arial Black
• Century Gothic
• Comic Sans MS
• Courier New
• Helvetica
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Cross Browser Compatibility Testing Websites

There are multiple places that you can test your website. See how it looks on different operating systems and browsers.

Brower Shots

Browser Shots is one of the most popular sites. As it is free to use and has a lot of different platforms to test.

BrowserStack

BrowserStack is a paid option, but I feel is worth the money. It has a more natural testing environment and is much faster than Brower Shots.

Browserling

Browserling is another popular free option but limits to what source you can test with. They do have cheap paid versions.

CrossBrowserTesting

With only coming in with paid plans. CrossBrowerTesting does give you unlimited tests between all platforms.

Ghostlab

Ghostlab is a paid software but comes with some cool features. Like synchronized browsing and automatic refreshes on changes.

Never Stop Testing

Internet browsers are always changing and updating. You need to watch for major updates and test to make sure there are no issues with your site.

With mobile devices becoming more of a factor for your website. You will need to start cross browser testing those as well.

I know that is a lot of different combinations but start with the most commonly used for your website. Then work your way down the list.