A Better Browser

This is my PSA to help the world rid itself of bad browsers:

So I just wrapped up major development on a 3-month project and I am stoked to be done. But, I am also more and more convinced of Internet Explorer's ... deficiency.

Now there are the normal "quirks" with IE that every web designer runs into (e.g., version 7's inline-block problem). These "features" are annoying and I have to deal with them often, but at least there are a number of known work-arounds to help me.

There is one major thing that I've come to see about IE in these past 3 months for which there are no work-arounds. It is dreadfully slow and clunky. Things that will run smoothly and look great on Chrome, Safari and Firefox, will look awful slow on IE. This last project uses a lot of DHTML and it has a really high level of user interaction, so naturally there are a lot of animations and fading of images, etc. IE just cannot handle it and I've had to remove a lot of animations for people who are visiting the site with IE.

So, now that the browser Google Chrome is celebrating its second birthday, I thought I'd share my thoughts about browsers once again. Use Chrome if you want a fast, responsive, useful browser. I particularly enjoy the streamlined UI. Switch between Chrome and IE and you'll notice MAJOR speed enhancements. I love Chrome and you will, too.

Inline Block, A Quick Work-Around

I've had previous struggles with inline-block quirks, and have been recently using a handy css solution I thought I'd share. Whenever I want a certain div, for example, to be displayed as inline-block, I simply add the class "inlineBlock" to it. Well, you ask, how do I define this class? I am glad you asked. I define it like so:

<style type="text/css">
.inlineBlock {
 display:-moz-inline-stack;
 display:inline-block;
 zoom:1;
 *display:inline;
}
.myClass1 {
 /* other stuff */
}
<style>

<div class="myClass1 inlineBlock">
 A fancy inline-block div.
</div>

This CSS causes my div to be displayed correctly as an inline-block in every browser I've checked. Not sure how the magic works specifically, but it does the job! If you have improvements or observations, add a comment below.

Browser detection with jQuery

Those who create web apps to work for the widest possible audience, know that overcoming browser quirks is an unfortunate part of the job. The two greatest pains for me are IE6 and IE7, both common browsers with an uncommon ability to screw up my pages. (I think IE8 is a wonderful improvement to this line of browsers.) Recently I found out how to determine if a browser is IE7 or lower using this handy jQuery statement:

<script type="text/javascript">
if ($.browser.msie && (parseFloat($.browser.version) < 8)) {
     // Do something for IE7 or IE6
     // Like replace some image src with a gif (instead of transparent png)
     // or change a style to look right
}
</script>

Of course, you must have the jQuery library included on the page before this. But this little script is great for dealing with those demanding IE-specific quirks, like display:inline uniqueness, select-box borders and transparent png support.

CSS: inline-block

So much time spent on one CSS statement - "display: inline-block;"

This statement is perfect for a new site I am working on. I want three columns of data to display side-by-side. But, I had many frustrations trying to get it to work cross-browser. This is what I found...

Inline-block works great on IE 8, Chrome and recent versions of Safari.

I had issues when it came to IE6 and IE7, no big surprise there. I fixed this with some conditional comments and the CSS property "display: inline" which acts the same as inline-block in IE.

I also had problems with Firefox 3! My old love of a browser takes issue with this statement (when used with other specific statements). Apparently "display: inline-block" does not play nice with "overflow: hidden" and "text-align: center". This strange alignment of the planets causes my text to align left, instead. Quirky. I ended up commenting out the overflow property, and everything worked for Firefox 3. (I also added a strange Firefox style statement to make sure it worked on FF 2: "display: -moz-inline-stack;".)