Dawning Day Delicious Detail: This series of posts is in response to one of my Knower follower’s questions.
Believe it or not, all web browsers do not behave the same way. And depending on how a website is coded, it might look differently in each browser. Clearly, this can be quite problematic; broken sites often look unprofessional. So how can you determine whether your website looks the same across all browsers?
Well, one approach to cross-browser compatibility is to install multiple browsers on your computer, such as Internet Explorer, FireFox, Safari, and Opera. But there is one big flaw in method: browsers behave differently depending on version and platform. This means that you’d need to install all versions of each browser on your computer to determine cross-browser compatibility… Clearly, this is unreasonable. So, how can you test your site?
Fortunately, there are free tools which can capture a website and let you preview screenshots of your site in each browser.
Free Website Checkers
There are a wide variety of tools that you can use to view your website in multiple browsers. However, we suggest you use a service calledBrowserShots. This services enables you to choose platform (Windows, Mac OS, Linux, BSD), resolution, browsers (and versions), as well as a host of other settings. And best of all, its free.
It is also a good practice to verify that your markup (HTML, CSS) meets current coding standards. This ensures that code is more likely to be compatible with current browsers as well as any new browser. Two free tools to validate your website can be found by clicking on the following links: HTML Validator, CSS Validator. (Feel free to use some of the other tools on this site. There is also a link checker which can be helpful in finding broken links.)
Alright, so now that you know what tools to use, go ahead and submit your site for screen shots. Once done, you might notice a lot of spacing, font, or border issues between the browsers. How can you fix it?
Quick Fixes for Common Cross-Browser Compatibility Issues
While it is possible to serve different content or style sheets depending on the browser, it is much easier to use smaller fixes. We’ve included some below.
Inconsistent Element Margins and Padding
We recommend that you set the default margin and padding (and possibly the border) of all elements to zero. Most browsers automatically use 0 as the default value for padding and margins, however, some browsers have default values of 5 or 10 pixels. To set the default value to all elements, add the following code to your stylesheet, above any style content:
If you are not using stylesheets, simply add the following between your head tags, above any style content:
If this looks unfamiliar to you, here is an explanation. The asterisk (*) is known as the universal selector. And it is used to apply styles to all elements.
Double Margins in Internet Explorer On Floating Elements
For some odd reason, Internet Explorer may actually double the margin on elements that are relatively positioned and floated left inside of another relatively positioned containing element. One quick way to fix this is to simply add one property to your style sheet definition for that element:
This will remove the excess space and will not affect the rendering in any other browsers.
Inconsistent Centering Issues
Sometimes, you might find that your website is not centered on all browsers. One quick way to fix this is to use both the margin and text-alignproperties. Take a look at the code below:
This code centers the container element. It also centers everything in thebody, including text. This is why you need to set the text alignment in thecontainer element. Finally, it also sets the widths of the html and body elements to ensure that they span the viewable area of the browser.
Of course, you will probably run across a host of other problems; we can only cover a few here. But feel free to leave a comment mentioning your problem, and we’ll suggest a fix. Be sure to include a page url, browser, and anything else you think might help.