Testing web pages in multiple browsers

Like most other people, I need to test my web designs on multiple browsers because of the inconsistencies between all of them regarding javascript and CSS.  Mainly CSS.  The worst offender, of course, is Internet Explorer, and I have been having a lot of trouble figuring out how to test the different versions.

MultipleIE

The first software I tried was MultipleIE.  This software worked great when i was set up with MultipleIE running IE 5, IE 5.5, and IE 6, and the normal Microsoft installation of IE 7.  After installing IE 8 b2, which required installing MultipleIE’s version of standalone IE 7, everything blew up.  IE 7 and below would no longer allow me to select any input text boxes.  IE 7 and IE 8 wouldn’t let me use combo boxes because of the pop-up blocker.

IE Tester

Since that stopped working and I could not find any information online, I tried another application called IE Tester.  I’m not sure how this one works, it seems to be encapsulated all within one application.  The install package is around 120 megs, so maybe all of the IE applications are in there.  I haven’t use it that long, but it seems pretty good.  It reflects all of the IE errors I expected my application to have based on what MultipleIE seemed to be telling me.

VM

I then went on and asked a very knowledgeable friend for his opinion, and his exact tweet was:

VMware ESXi server (free), and lots of VMs. The run MultipleIE/FF/Safari on those VMs with different versions of Java, Flash, etc

which would be the ideal solution since you could run dedicated versions of everything.  But the logistics seem like they would be a nightmare.

So my search goes on.  I am trying to determine how others do this.

update:

VM: I started using an application called VirtualBox (I found it here), owned by Sun now.  It seems to be a nice windows-based application that will allow me easy connect to my network and load a single browser.  I’m still testing, and i need to see how easy it is to clone the machine once I get a clean install.

Intelligent Mail barcode – iText and barcode4j

I use a java library called iText to create PDFs and do other PDF related tasks when I am building web applications, and i embed a lot of barcodes for various purposes. iText handles most of these very well, but I recently needed to replace the old USPS barcode (postnet) with the new barcode (intelligent mail). iText doesn’t support it, but with some helpful direction I implemented it using another library called barcode4j.  Here’s the method I wrote that you can pretty much copy and use directly:

/**
* Create a USPS Intelligent Barcode using Barcode4J and add it to iText document.
* @param code barcode value
* @param cb overcontent from stamper
* @param fieldPositions stamper.getAcroFields().getFieldPositions(“…”) for the placeholder field in PDF template
*/
public static void createUspsIntelligentBarcode(String code, PdfContentByte cb, float[] fieldPositions) {

if ((code.length() != 20) && (code.length() != 25) && (code.length() != 29) && (code.length() != 31)) {
throw new RuntimeException(“UspsIntelligentBarcode: code length of ” + code.length() + ” is invalid.”);
}

//Note: fieldPositions data = [page, llx, lly, urx, ury]
float height = (fieldPositions[4]-fieldPositions[2]);
float width = (fieldPositions[3]-fieldPositions[1]);

PdfTemplate tp = cb.createTemplate(width, height);

// Create the graphics and canvas objects that will contain the barcode.
Graphics2D g2 = tp.createGraphics(width, height);
g2.setRenderingHint(RenderingHints.KEY_FRACTIONALMETRICS, RenderingHints.VALUE_FRACTIONALMETRICS_ON);
g2.scale(2.5, 2.835); // (1mm == 2.835 points) + tweaking on x to make bar width correct
Java2DCanvasProvider provider = new Java2DCanvasProvider(g2, 0);

// Create Barcode4J barcode on canvas
USPSIntelligentMailBean barcode = new USPSIntelligentMailBean();
// use 70% of converted values.  Measurements on printouts needed to be tweaked.
barcode.setAscenderHeight(UnitConv.in2mm(0.1f) * 0.7f);  // height of ascender/descender per USPS spec
barcode.setTrackHeight(UnitConv.in2mm(0.05f)* 0.7f);      // height of track bar per USPS spec (smallest bar of barcode)
barcode.setBarHeight(UnitConv.in2mm(0.145f)* 0.7f);
barcode.setIntercharGapWidth(UnitConv.in2mm(0.04f)* 0.7f * 1.13f); // adjust again for scaling
barcode.generateBarcode(provider, code);

g2.dispose();

// adjust x/y to perfect location for envelope window
float inch = 72f; // itext manual pg 33
float xCoordinate = fieldPositions[1] – ((1f/8f) * inch);
float yCoordinate = fieldPositions[2] – ((3f/32f) * inch);

cb.addTemplate(tp, xCoordinate, yCoordinate);
}

This lets you put the intelligent mail barcode (or any barcode in barcode4j) directly into iText.  The key here is that the PdfTemplate in iText has a method that creates a generic Java Graphics2D object that is accessible for drawing by anything.  This generic object is exactly what is needed to be passed into the barcode4j canvas provider, and then any barcode4j barcode is output to the canvas.  A couple tweaks to position it however it is needed, and that is it.  It was a lot simpler than I expected when I realized I couldn’t just use iText for the whole thing.  Gotta love open source!

jsp tomahawk HtmlInputCalendar

I had an ongoing issue recently with pop-up javascript calendars in the tomahawk jsp library.  Hopefully this will save some trouble for someone.  The problems I was having were:

1. sometimes the calendar pop-up was not selectable, and
2. when it was selectable, the pop-up would show up at a distorted location on the page and the tables would be messed up.

Being new to debugging this, my first assumption was that there would be protections built into this packaged code so that my CSS and whatever else would not affect it.  So, to keep this post short and to the point, here is how I fixed it:

1. An eventual look at the W3C HTML 4.1 Reference showed that this element was difficult to put directly inside a label, inside a fieldset.  The problem is that the label element only supports one input inside, so the additional calendar pop-up button is unusable and simply ignores any click on it and instead puts focus on the input element.  I ended up fixing this one by simulating a label element using a DIV and CSS.  (Note: at B6 Systems, we have developed an in-house jsp framework that we call PureFaces that allows writing JSP pages completely in Java code.  So I wrote my own components for the fieldsets and labels.  It is intended to be open source eventually and will be on the B6 website)
2. The second problem took a little longer, and eventually I fixed it without really knowing why what I did worked.  I used a lot of the same techniques for debugging CSS that are shown in many places.  Eventually I found that I had a position: relative; style on my content wrapper that was totally throwing off the built-in CSS for the pop-up.  The reason I don’t know why that fixed it was that I could not find anything in the built-in CSS that seemed to care about position.  But, results speak loudly.  I was able remove and work around that style.  The second part of this one (the bad formatting of the pop-up) was related to having the table element way too globally defined in the CSS.  Adding more specific selectors quickly solved that one.