Hello. I'm Rob V.

I spend a lot of time dealing with cross browser compatibility and it’s not fun (I’m looking at you Internet Explorer). But over the years I’ve developed a few habits that make the task a little easier and I thought I might as well share these tips with the rest of the world, so here goes nothing.

1. CSS Reset (duh)

I’m pretty sure by now every developer has had it beat into their head the importance of using a CSS reset file, it makes your job easier and should never be forgotten. There are a few of them out there and just about everyone uses Eric Meyers’, but as long as your using one that works, well, you’re fine. If you aren’t using one and haven’t decided on one yet I’ve provided one that I’ve used for a while below.

The basic problem we’re trying to solve here is that different browsers attach different default styling to elements, this can make uniformity a nightmare. A CSS reset file should nullify any of these differences and give you a blank slate to work with.

2. Take Care of Floats

This is probably the biggest issue, but one of the easiest to fix. When you’re using floats for elements you’ll notice that you run into a lot of wrapping issues, and that different browsers handle this differently. It can be frustrating to deal with, but if you remember two things you’ll usually be ok.

Wrap Your Floats

Make sure that if you’ve got an element you’re floating to wrap it in another div, creating a container element that you can then apply a clear to.

Clear Your Containers

When you’ve created a container to hold your floated elements apply a clear fix to them. Some developers prefer to add an element after the floats and do something like clear: both; on it, but I’ve provided the clear fix solution I use below which I apply to all containers and it solveds 99.99% of my problems.

3. Absolute Position is Your Friend

Sometimes when you’re trying to position elements on a page it can be a pain to get it to match on all browsers. Taking advantage of absolute positioning whenever possible will make things so much easier in the long run. One thing developers tend to forget, or often just don’t know about is that if you apply position:absolute to an element it wont automatically assume you also mean top:0; left: 0; instead it’ll position the element exactly where it should be in regard to where it is placed in the mark up. You can then alter the position of the element using margins; in this case negative margins are also available to you if you want to take advantage of them.

4. Wait to Test

Browser testing is not fun and can often times be demoralizing. This is why I think it’s always important to wait until I’m done developing and testing in one browser before moving onto the others. Waiting until the end makes it easier to fix every issue at once instead of fixing one, doing more work and breaking everything again.

5. Hold Off on Conditional Comments

If you’re having to resort to conditional comments to target browsers like Internet Explorer, you’re doing something wrong. These conditionals should only be used as a last resort. Spending the extra time it takes to work through issues will not only make for better code, but the things you learn will only speed things up in the future.