Bedrich Rios

If you are a web designer or developer, you test your work several times a day across several platforms. But, not everybody has enough money to buy more than one computer or virtual machines such as Parallels or VMware Fusion for that matter. No need to worry, there is another way.

Free Solution

There has been a new trend in the last couple of years to move most software (web-based applications) to the browser. And what better place for cross browser testing software then the browser itself. Websites such as browsercam allow you to test your design across an array of browsers and operating systems. This, however, comes at price.I’m a broke college student and spending any kind of money makes a very big hole in my pocket. So, I’m always looking for cheaper or, better yet, free alternatives. This is where browsershots.org comes in. Browsershots “is a free open-source online service created by Johann C. Rocholl” and it works more or less identically to  browsercam.

Pros and Cons

Browsershots is obviously not as mature as browsercam, as far as features and support go. But then again a lot of the features in browsercam are not at all necessary and don’t get me started on the interface. In any case, the biggest draw back to browsershots is the wait (anywhere up to 30 mins.), that is if you are not paying for the service. If you wish to get your screenshots faster you can pay a 10 euros or 15 dollars fee.  Or you can take the time it takes for browsershot to generate your screenshots to grab a cup of coffee.

Since 2001, IE6 has been a nightmare for all web designers and more recently IE7 is taking that spot. Although, as of last October, more people were recorded using Firefox to surf the web, the market share of the Internet Explorer family is still bigger than Mozilla’s browser and far greater than Apple’s Safari.

The Box Model Problem

This is the most widely known, and hated bug in IE6. In a few words, unlike Firefox (or other standards compliant browsers), IE6 disregards an element’s specified width and/or height for its content and adds padding, margin, and border to it. This means that in Firefox an item with a width of 200px and a padding of 10px equals 220px in width. The padding is added to the the element after the the content area’s width is determined by the CSS rules. On the other hand, IE6 will render an element with a total 0f 200px. This happens because the padding is included in the content area’s width of the element.

A few solutions

* html: There is a huge debate about this method within Web Designing circle. People claim this is a hack, and well I think it is. Nevertheless, it is one of the much “cleaner” hacks (if used sparingly) and I personally use it from time to time. All you have to do in order to use this hack is add * html before any of your CSS rules. This will make the rule only be applied to IE6 and no other browser.

JavaScript: This method is also a very clean one. How does it work? I think that is a topic for another post (leave a comment if you wish me to write about it). But in a few words, it uses JavaScript to detect which browser a person may be using and inserts a given piece of CSS to that specific browser. The downside to this method is that it requires JavaScript to be enable in your browser, something that is not always true.

Conditional Comments: Yet another way to deal with IE6, and send this browser specific rules. The only downside to this method is that it messes with the mark-up of your web page. All you have to is add the following to your source: <!–[if IE 6]>And add specific mark-up, stylesheets, or JavaScript toIE6 <![endif]–>.

Final Thoughts

When dealing with IE6, no method is perfect. And for the most part, even if you don’t, somebody is going to consider your method of choice a hack. I personally think that anything you do, as long as you do it sparingly and with reasoning, is fair play. Let me know if you want any tutorials or post to appear on my blog by leaving a comment.