Four Browsers, One Game

The following four images are of my game Connect! in four browsers (all of which run on an XP box):


(Fox, IE, Opera, Safari)

Because I made use of <img> tags for everything except for the text 0/0 on the bottom, there isn’t much of a noticable difference.

However, the second you bring up the menu, you can see it:


(Fox, IE, Opera, Safari)

Each of these images is of the mouse cursor hovering over the “New Game” button. Safari doesn’t even flinch, Opera decides to use a bullhorn to announce which button I’m over, IE and Fox both do mostly the same thing, but IE makes the font prettier.

Finally, the new game dialog itself:


(Fox, IE, Opera, Safari)

In both the menu and the dialog, the dialog spill over to the right and to the bottom by two pixels in all browsers but IE (the border style is 1px).

Most developers at this point go on a tirade about how browsers can’t be consistent. I’m not one of those. I just find the (to my mind) minor differences interesting. If I want to make everything look identical across the browsers, I can do so by making everything an <img> tag, but that means reimplementing every UI element already available in the HTML DOM, in which case I’m not interested.

All in all, I’m overall pleased that A) it works in all four, and B) it is relatively consistent in each.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s