Cross-Browser Compatibility and HTML & CSS Validation

We all know the importance of checking our web pages with multiple browsers, especially when we are designing a new layout for a website. This is the case even if we are writing validated standards-compliant code. The number of extant browsers we need to check with are enormous: Internet Explorer ("IE") 6 to 11, the current version of Firefox, the current version of Chrome (or Vivaldi, which uses the same code), the current version of Safari, and so on. And then there are the different platforms: Windows, Macintosh (Mac), Linux, etc. The problem for most people is that multiple versions of certain browsers cannot co-exist with each other, the most notable example of this is IE for Windows. Unless you happened to have multiple computers, this presents a certain difficulty for the average webmaster. This article suggests some ways for you to run multiple versions of multiple browsers on one computer.

Note that this article is written primarily from the point of view of a person using Windows (the majority of people reading this article), although it does address the issue of Mac browsers and Linux browsers as well.

Firefox and Seamonkey

It's possible for different versions of Firefox and Seamonkey to all co-exist on the same machine.

If you did not already know, Mozilla Firefox and Seamonkey use the same Gecko rendering engine. As such, if you have one of these browsers, you probably don't need to install the other to test your site.

It is easy to make multiple versions of Firefox and Seamonkey co-exist with each other. Install them into separate directories and create a different profile for each browser you install. (For non-Firefox users, this browser allows you to create different profiles so that you can store different settings for different situations.)

To create a different profile for Firefox, simply start Firefox with the following command line:

"c:\Program Files (x86)\Mozilla Firefox\firefox" -ProfileManager

Once you've finished creating profiles, you will want to create shortcuts (Windows terminology) to run the different versions of the browser. This makes life easier for you: you can simply click the appropriate icon for the different versions, and it will load using the correct profile. To specify which profile the browser is to load, put the profile name after the "-P" option.

For example, if you have created a profile named "currentfirefox", your command for running the current version of Firefox with that profile may look like:

"C:\Program Files (x86)\Mozilla Firefox\firefox.exe" -P currentfirefox

Similarly, your command to run the Firefox with a profile called "oldversion" may look like:

"c:\Program Files (x86)\Mozilla Firefox\firefox" -P oldversion

And so on.

I'm not sure that you really need all the different implementations of the Gecko engine to test, though. I personally only test my sites with latest version of Firefox since my site design tends to be simple.

Chrome, Vivaldi, Opera and Safari

Google's Chrome browser, the Vivaldi browser and the current version of Opera all use the same engine. In general, you can expect that the vast majority of people who uses the Chrome browser will be using the latest version, since that browser automatically updates itself whether you want it or not. As such, I tend not to bother to test my sites with earlier versions of Chrome.

You can get Chrome from Google's Chrome site and Vivaldi from Vivaldi.com. Since these browsers use the same engine, if a site works with one browser, it should probably work with the other.

In addition, the Safari web browser share a lot of code in common with both Chome, Vivaldi and Opera, since all four ultimately derive their engine from yet another browser called Konqueror. This similarity will diverge over time, since the engine for Safari is being developed separately from the other three. If you are feeling lazy, you can probably get away with testing under any one of the four for now, although if you really want to be thorough, you probably should install Safari in addition to one of the other three. All four browsers can coexist with each other on the same computer.

Internet Explorer

For most sites, IE users probably comprise the majority of visitors, despite the inroads made by the other web browsers. Now that Microsoft has made Internet Explorer automatically update to the latest version (via Windows Update), chances are that more and more of your visitors will be using the latest version.

Unfortunately, in spite of this, there are still a few users sitting on old versions of the browser. For example, IE 6 is still being used by some people running Windows XP. Although this number is dwindling rapidly, at the time I write this, there are still enough visitors using it for some websites that webmasters feel obliged to continue to support it. (The actual percentage varies from site to site, depending on the target audience of each site.)

My experience in coding thesitewizard.com and thefreecountry.com, both of which depend heavily upon Cascading Style Sheets ("CSS") for layout, is that IE 6 and 7 are very different animals from the other browsers or even the later incarnations of IE. Contrary to what you may expect, what works in IE 11, Vivaldi, Firefox and Safari will not necessarily work in IE 6 and 7. IE 6 has numerous bugs in its engine, causing sites that are correctly coded to break under that browser. In other words, if you want to support IE 6 and 7, you need to have those browsers installed somewhere so that you can test with them. You can't just assume that your site will look fine in those old browsers.

Unfortunately, you can't install more than one version of IE. The bulk of IE's code does not get installed into its own subdirectory (or folder) but into Windows' system directory. Although there have been unofficial solutions available for some time among the webmaster community for installing different versions of IE into the same Windows installation, there are various peculiarities in the end result, and the IE versions you get from that behave slightly differently from the standard versions when installed normally. As such, I don't really recommend those "solutions". Instead, if you feel you really need to test with old versions of IE, you should probably try one of the following methods.

Method 1: How to Run More than One Version of Internet Explorer on a Single Machine: Using a Virtual Machine

The official Microsoft-sanctioned method of testing with multiple versions of IE on one computer is to install a virtual machine.

Loosely speaking, virtual machine software allow you to run another copy of Windows within your existing version of Mac OS X, Windows, Linux, FreeBSD or whatever. The virtual machine software pretends to be a new computer, and Windows gets installed into a small space on your hard disk which the software uses to mimic an entire drive.

Microsoft provides pre-activated copies of Windows with various versions of IE in virtual machines free of charge to web developers who need to test their sites in Internet Explorer. The pre-activated Windows expires periodically, so you will need to download a fresh copy from time to time.

You will also need to install one of the supported PC virtual machine software that can run those pre-activated Windows machines. For Windows users, this is either Virtual PC, VirtualBox or VMWare Player, all of which are free, and can be found on the Free PC Virtual Machines and Virtual Machines page. Mac OS X users can use either VirtualBox (which is free), Parallels Desktop (a commercial program) or VMWare Fusion (also a commercial program). Linux users can use VirtualBox.  

Once you've installed both the virtual machine software, and the virtual machine from Microsoft, all you have to do is to run it. This will give you a copy of the appropriate version of Windows with a matching version of IE, which you can use to surf to your website to test it.

Note: Microsoft has terminated its support of Windows XP on April 2014, so it's possible that they will stop providing virtual machines containing XP and Internet Explorer 6 eventually. If that's the case, it will no longer be possible for you to test IE 6 unless you have your own copy of Windows XP. I personally hope that when we reach that date, the number of IE 6 users will be so small that it's no longer even necessary for anyone to bother to test with that desperately obsolete version. You will still be able to test with IE 7 and above though, at least until the version of Windows that comes with those versions stops being supported.

Method 2: How to Run Two or Three Versions of IE on One Machine By Dual or Multi-Booting

This method is not recommended unless you have special reasons (other than testing websites) for needing to dual-boot or multi-boot. It is more technically demanding, disruptive, time-consuming and uses more hard disk space.

For the technically inclined, another way to run two versions of IE on a single machine is to install multiple versions of Windows on that machine, each in its own partition. In plain English, this means that you need to divide your hard disk into (at least) two sections, called "partitions". Then install different versions of Windows into different partitions. You may have to modify your Windows boot menu to support all of them, or use a third party boot manager. (Sorry for the vagueness in this paragraph, but I don't envisage many people to actually need to use this method, and those who do, already know how to do all this.)

How to Test Mac Browsers

Nowadays, you don't actually need a Mac to test Mac browsers, since the default Mac web browser, Safari, and alternative browsers like Firefox and Vivaldi have Windows equivalents.

Having said that, I'm not 100% sure if browsers display things exactly the same way in Windows as in Mac OS X, even if they are the same brand. That is, I'm not sure if (say) Safari for Windows displays things identically with Safari for Mac OS X. However, I think that for the most part, where my sites are concerned, the way they render things is sufficiently alike that I don't need to bother with specially getting a Mac just to test the sites.

Before you ask, although there are things such as free Mac emulators, which are software that run in Windows but pretend to be a Mac and thus can run Mac software, they are not particularly useful from a webmasters' point of view. The working Mac emulators tend to emulate the old obsolete Macs, not modern ones.

In any case, as I said earlier, you shouldn't need a Mac to develop a website that works on it. Just check that your website has valid code and test your website in the Windows versions of Safari, Firefox and Vivaldi, and you'll probably be fine. If, however, your site requires absolute precision in the positioning of its text, images and other elements, and you want to make sure it looks correct on a Mac, you will have no choice but to get a real Mac to test it on.

Testing Linux Browsers

One of the easiest ways to test your site under Linux is to run Linux from a CD or DVD. There are numerous Linux "live" CDs around; see the Free Linux LiveCD Distributions page for a list of them. These allow you to simply boot your machine from the DVD/CD directly into Linux without having to install anything onto your hard disk. Essentially, all you have to do is to download an ISO (which is just an image of the DVD or CD) of the Linux distribution, burn it to your CD or DVD, put it in your CD or DVD drive, and restart your computer. The computer boots from the media and runs Linux without installing anything on your hard disk. From the DVD (or CD), you can run many Linux applications, including the Linux version of Firefox and Konqueror.

If you are feeling lazy, and you have installed an emulator or a virtual machine, as mentioned above, you don't even need to burn the ISO to a CD. You can simply use the virtual machine to boot the ISO — your copy of Linux will then run in the virtual machine. Or, if you prefer, you can also directly install Linux into the virtual machine.

Yet another alternative is to install Linux on your hard disk, using one of the many free Linux distributions around. You can set it up so that it co-exists with Windows (ie, dual-boot). Make sure you have space for a new partition on your hard disk, install it and you're done.

The default browser that comes on many Linux distributions is Firefox (although not necessarily so). However, you will find that even though Firefox tries to render your page the same way under all platforms, the fonts available under Linux are different from those available on Windows. If you don't code your fonts in a cross-platform compatible way, your site may end up being rendered with an ugly font. For example, if your site only specifies "Arial" or "Impact" or some Windows-specific font, since these fonts are not available by default under non-Windows systems, your site will be rendered using either the default font or some other font that the browser thinks matches what you've specified.

If you don't want to bother to run Linux to test, be sure that you at least:

1. Test your pages under Firefox for your platform.
2. Specify alternative fonts for your web pages. For example, don't just select a font like "Arial" in your design. Specify alternatives as well, should Arial not be available, like "Helvetica" and a final fallback, something generic like "sans-serif". If you don't know how to do this, please see my article on choosing fonts for more information.

Whether you design your web page using a visual web editor 

 like Dreamweaver or KompoZer, or you code HTML directly with a simple text editor, the generally recommended practice is to validate it after you finish designing it.

This article discusses what validation means, points you to some of the free tools that you can use, and deals with its limitations and the problems that a new webmaster may face.

Note: if you are not sure what HTML and CSS mean, please read What are HTML, CSS, JavaScript, PHP and Perl? Do I Need to Learn Them to Create a Website? before continuing. Otherwise you'll be completely lost here since I assume you at least know what these terms mean.

What does Validating HTML or CSS Mean?

For those unfamiliar with the term, "validating" a page is just a jargon-filled way of referring to the use of a computer program to check that a web page is free of errors.

In particular, an HTML validator checks to make sure the HTML code on your web page complies with the standards set by the W3 Consortium, the organisation ("organization" in US English) that issues the HTML standards. There are various types of HTML validators: some only check for errors, while others also make suggestions about your code, telling you when it might lead to (say) unexpected results.

The W3 Consortium has its own online validator which you can use for free. It may be found at: http://validator.w3.org/

A CSS validator checks your Cascading Style Sheet in the same manner. That is, it will check that it complies with the CSS standards set by the W3 Consortium. There are a few which will also tell you which CSS features are supported by which browsers (since not all browsers are equal in their CSS implementation).

Again, you can get free validation for your style sheets from the W3 Consortium: http://jigsaw.w3.org/css-validator/

There are numerous other validators around, both free and commercial, focusing on different aspects of your web page. You can find a list of free ones (including specialised validators like those that check your code for accessibility) from the Free HTML Validators, CSS Validators, Accessibility Validators page at 

http://www.thefreecountry.com/webmaster/htmlvalidators.shtml

Why Validate Your HTML and CSS Code?

There are a number of reasons why you should validate your page.

It Helps Cross-Browser, Cross-Platform and Future Compatibility

1. Although you may be able to create a web page that appears to work on your favourite browser (whatever that may be), your page may contain HTML or CSS errors that do not show up with that browser due to an existing quirk or bug. Another person using a different browser that does not share that particular bug will end up viewing a page that does not show up correctly. It is also possible that later versions of your browser will fix that bug, and your page will be broken when people use its latest incarnation.
   Coding your pages so that it is correct without errors will result in pages that are more likely to work across browsers and platforms (ie, different systems). It is also a form of insurance against future versions of browsers, since all browsers aim towards compliance with the existing HTML and CSS standards.

Search Engine Visibility

1. When there are errors in a web page, browsers typically try to compensate in different ways. Some may ignore the broken elements while others make assumptions about what the web designer was trying to achieve. The problem is that when search engines obtain your page and try to parse them for keywords, they will also have to make certain decisions about what to do with the errors. Like browsers, different search engines will probably make different decisions about those errors, resulting in certain parts of your web page (or perhaps even the entire page) not being indexed.
   The safest way to make sure the search engines see the page you want them to see is to present them an error-free page. That way, there is no dispute about which part of your page comprises the content and which the formatting code.

Limitations: What Validation Does Not Do

Validating your web page does not ensure that it will appear the way you want it to. It merely ensures that your code is without HTML or CSS errors.

If you are wondering what the difference is, an analogy from normal human language will hopefully make it clear. Let's take this sentence "Chris a sandwich ate" which is grammatically incorrect when used in a non-poetic context. It can be fixed by simply reversing the order of the last two words so that the sentence reads "Chris ate a sandwich".

But what happens if you write a sentence that says "Chris ate a pie" when you meant that he ate a sandwich? Syntactically, the sentence is correct, since all the elements of the sentence, subject ("Chris"), verb ("ate") and object ("a pie") are in the right order. Semantically, however, the sentence describes a different thing from what you meant.

HTML and CSS validators are designed to catch the first type of error, exemplified by the grammatical error of my first sentence. So if you write HTML code that has (say) the wrong order, the HTML validator will spot it and tell you. However, it cannot catch errors of the second kind, where you get the spelling and order and all other technical aspects correct, but the code you used does not match the meaning you intended.

Ensuring that your code does what you want it to do requires you to actually test it in a web browser. Depending on the complexity of your code, you may even want to test it with different browsers to make sure that your site looks the same in all of them, since it's possible that you are using features of HTML and CSS that are only implemented in some browsers but not others.

What to Do If You Don't Know HTML and CSS

If you have designed your site using a visual web editor, and are not familiar with HTML and CSS, you will face an additional problem.

While running the validator and getting it to validate your page itself will not be an issue (since the W3 Consortium's validator is not only free, it doesn't even have to be installed to be used), the problem comes when the validator checks your page and tells you that there are errors.

If you have no knowledge of HTML and CSS, you will probably have some difficulty figuring out what those errors mean, whether they are serious, and how to fix them.

Although there is no perfect solution to this, you are not completely without resources.

1. If you are using an editor like Dreamweaver, Microsoft's Expression Web, KompoZer or BlueGriffon, you can usually assume that the code they produce on their own is valid. From my limited experience (mainly creating demo sites for the purpose of writing tutorials or reviews for thesitewizard.com), these four editors seem to create correct HTML and CSS code.
   This means that if you get errors when you validate your page, the problems must come from elsewhere. If you have inserted code that you obtained from a website (such as if you have added a Youtube video to your page), it's possible that the code is the source of the error message.
   Alternatively, if you have modified the code on the page manually, the error may have crept in there.
   Having said that, sometimes the error is benign. For example, if you have added XHTML code to a page that has HTML, you may or may not get validation errors since you are mixing 2 different HTML families that have slightly different conventions. As far as I can tell, for the most part, this kind of error does not cause any problem for either browsers or search engines.
2. Another way is to search the Internet for the solution. For example, you can copy and paste the error message given by the validator into a search engine, and see if there are any websites out there that talk about this particular error. This may not be as fantastic an idea as it first appears, since their solution may be too general to be helpful for your specific problem, unless the error message is the result of your pasting code from some popular source (like Youtube or something of that level of popularity).
3. A third way is of course to ask someone, whether it's someone you know personally, or someone on the Internet. This solution also has its own issues, since you may get a solution that creates a bigger mess of your page than it had in the first place. It all boils down to their competence and willingness to spend enough time figuring out the problem.
4. Finally, you can also ignore the problem. If you want to do this, you should test your web page in as many web browsers you can to make sure the error message does not diagnose a problem that causes visible issues. If you find that your site seems to work fine in spite of the error, you may decide to just ignore it and hope for the best.
   Although this solution is not ideal, you may be forced to take it if you can't find an alternative. It's not ideal because the error may bite you later when you least expect it, for example, when there's a new version of some web browser that chokes on the bad code. It may also cause problems in a non-visible manner, such as in the way the search engines index your page.

How Often Should I Validate?

Some people validate every time they make a modification to their pages on the grounds that careless mistakes can occur any time. Others validate only when they make a major design change.

I always validate the template for my pages when I make a major design change. I try to validate my pages each time I make modifications, although I must admit that I sometimes forget to do so (with the occasional disastrous consequence; Murphy's Law doesn't spare webmasters).

I find that having an offline validator helps to make sure that I remember to validate: having to go online just to validate my pages tends to make me put off validation till later, with the result that it'll occasionally get overlooked. For those not familiar with the terminology I use, when I say "offline validator" I simply mean a validator that I can download and install in my own computer so that I can run it on my pages without having to go to the W3 Consortium's website. You can find offline validators on the free validators page I mentioned earlier, that is, http://www.thefreecountry.com/webmaster/htmlvalidators.shtml

The HTML Tidy validator (listed on that page) is available for numerous platforms (including Linux, Mac, Windows, etc) and has proven helpful to many webmasters the world over.

Final words: 

It's a good idea to test your site with multiple versions of multiple browsers, particularly if you plan to do anything fancy with style sheets on your site. This doesn't mean that you have to support all browsers — for example, the pages on thesitewizard.com do not work with very old browsers. However, when you are able to test your pages this way, you can at least reduce the number of problems your pages have with the different browsers. The tips in this article allow you to test with multiple browsers even if you have only one machine. As I mentioned above, it's generally a good idea to validate your web page. It will point you to errors that may affect how your website is understood by web browsers and search engines. Even if you are not familiar with HTML and CSS, there are still some ways you can deal with the errors that you discover from validating your page.