Browser support is something that we have to face as developers. Not everyone adhere’s to web standards put in place (yes, I’m talking to you Microsoft) and it’s a part of doing development. Get used to it being different in various browsers. There are certain techniques we professionals have learned over the years that help big time.
- Consider resetting your stylesheet first to null values for everything, then re-declare all of your settings from scratch. You’d be surprised how often you’ll build something in Firefox as your test browser (simply because of the developer plugins available to you), only to find that when you test in Internet Explorer at the end it looks messed up. Padding and margins will be off, etc. Reset to 0px for everything then start from there to ensure a unified look in just about every case.
Although I use a variation I have created myself, this is an excellent starting point:
- When developing a website, we don’t always see the same thing in all browsers. Things may shift slightly in each browser and certain features may not work if an older browser doesn’t support the feature you’re trying to use (ie., transparent PNG support or certain positioning elements).
Adobe BrowserLab gives you the ability to preview and test your websites in multiple browsers and operating systems. Since building a website to be cross-browser compatible is one of the more annoying aspects of web design, this should be a valuable web app to all of us.
Adobe BrowserLab supports screenshots in most major/recent browser versions and is incredibly fast at generating the previews for you. At this time, the software only shows the single URL you type in, so if you need to test multiple pages on a website you will need to test each separate URL independently of each other.
The service is 100% free and much quicker at generating the preview compared to other semi-free services such as BrowserShots.
There are many techniques we learn over the years through experience but these are a few of the really big hurdles you’ll encounter when developing websites. Good luck!
Anything we forgot to mention you’d like to add? Feel free to comment.