Checking Code vs different browsers

[mcolton]

I would like to check my coding against different browsers. I have IE8 on my pc and things look different when I look at someone who has IE7, etc.

1. Do I have to load other browsers on my pc to check my code or is there a way around this.

2a. How do I load another browser on my pc without causing any problems.
2b. If I do load another browser, how do I switch between them.

3. Which browsers should I be checking my code against.

Thanks for any help

[keyboard]

1. No you don't. You can use an online software like browsershots. I've never used it so I can't tell you good it is.

2a. Just install it, there shouldn't be any problems... I'm running Chrome, Firefox and IE9 without a glitch on my laptop.

2b. If your testing on a server, just open up the browser application, normally they give an option for making a shortcut on your desktop for easy access. If your just running html/javascript files off your harddrive, right click the file you're trying to open, select open waith, and pick one.

3. You should test your website against a range of different browsers. The main ones are Internet Explorer, Google Chrome, Mozilla Firefox, Safari, Opera. Safari and Google Chrome botth run off the same engine(webkit) so there shouldn't be very many differences between them.


As I said earlier, I'm running Google Chrome, Mozzila Firefox and IE which are probably the biggest three (correct me if I'm wrong).

Hope this information helps
Keyboard1333

EDIT-

One more thing to think about is different browser versions. There are massive differentes between IE9 and IE6 (just an example).

[traq]

I would like to check my coding against different browsers. I have IE8 on my pc and things look different when I look at someone who has IE7, etc.

1. Do I have to load other browsers on my pc to check my code or is there a way around this.

2a. How do I load another browser on my pc without causing any problems.
2b. If I do load another browser, how do I switch between them.

3. Which browsers should I be checking my code against.

Thanks for any help

Your biggest differences are going to be IE6/7 vs. IE8 vs. everything else.

1. You don't have to load every browser onto your machine, though it's not a bad idea to have as many as you can find.

keyboard mentioned browsershots; other services you might look at are browserstack and saucelabs.

They have an advantage over services like browsershots in that they actually run a virtual machine for you to do testing on - you have actual browsers on actual OS's to actually do things on, rather than just look at a screenshot. This allows you to test stuff like javascript in addition to basic css. both have free plans (full-featured, limited minutes).

2a/2b. As keyboard said, you install them like you would any other programs. You switch between them like any other programs.
(Safari actually does make a Windows version, which is a better approximation for Safari-on-Mac than Chrome is -- they're both webkit-based, but there are _big_ differences).

3. As I hinted at above, as many browsers as you can get your hands on. At a minimum:

• IE 7 (debatable, but I still recommend it!)
• IE 8
• IE 9
• Firefox 3.6
• Firefox (most recent)
• Chrome (most recent)
• Opera (most recent)
• Safari (most recent)

Installing multiple version of the same browser can get difficult - notably IE, which, natively, can't have multiple versions on the same machine at all. The newer solution is to use virtual machines (e.g., like browserstack or saucelabs do); previously, you had to resort to things like multipleIE (which is not under development anymore, try it if you like, but I'm not recommending it).

You should also consider mobile browsers - you might not be targeting mobile users (you should), but you at least need to make sure your site is usable and not a complete disaster on mobile devices. Fortunately, Android browser is very similar to Chrome, and Safari Mobile is very similar to Safari.

If your site is well-designed for the desktop, it will usually display "okay" on mobile devices. The biggest pitfalls are :hover (there is no hover on touch screens) and fixed positioning.

[djr33]

Safari Mobile is very similar to Safari

Aside from one instance I've seen (at this point I can't remember what, and it was minor), Safari mobile is identical to Safari on a computer.

The only difference, and this does apply to other types of devices, is that a phone's input/output is different than a computer's. So you don't have a mouse, you don't have a keyboard, and the speakers often don't allow too much control. You can usually get everything done, but a few things are a little different. Accessibility (for example, menus that you must hover over, something that isn't possible on a mobile touch screen) is a serious concern. But in terms of layout and how the code is processed, it's all but identical.
And of course there are other issues like the fact that you only get one window at a time (even if you can switch between a few stored "windows", they're never available at the same time on screen), and usually you can't download files or watch flash movies, etc.

[mcolton]

I've looked at a lot of these cross browser programs and they are REAL expensive. Is there a cheaper alternative.
Thanks for the help already given

[traq]

Both of the services I mentioned have free plans, which should be more than sufficient for a site or two. I do more than that and I can make do with it.

The alternative, if you have a powerful enough computer, is to set up virtual machines. There's free software out there to do it, though if you don't have a particular OS you might need to buy it. I think the online services would be much more practical, unless you have a big, full-time demand (in which case, you could afford a good VM setup).