(photo by Lauro)

I have been quite busy these past two weeks with a front-end project for a client. I can't say who yet but the "user-agent" matrix they had tells me that they maybe sticklers, making sure the Web pages we are developing for them work and look good across different browsers.

So, in the last two weeks I was transported back to the year 2000 when I was developing Web pages for IE5.5, IE6, and Netscape. Trust me, those were not the greatest times to be front-end developers.

Internet Explorer, in particular, was the bane of Web developers who happen to be working on projects where Web pages need to look consistent across different browsers. If the little annoying differences between IE and Netscape don't kill you, then the little annoying differences between IE5, IE5.5, and IE6 will.

If it appears that I'm singling out Internet Explorer as cause for the grief of front-end developers around the world, then you are not mistaken because I am and the past two weeks reminded me of why I abhorred developing Web pages for IE.

Luckily, things have changed, thanks to the availability of robust debugging tools, not to mention, the establishment of standards like those from the W3C.

So it's still annoying but it's not as hard anymore. Allow me to share the things that have helped me these past few days.

1. YUI CSS Foundation.
   
   When you are confronted with an Adobe psd file, you often wonder and stare at it for a few minutes to about an hour deliberating how you're going to build the Web page. You consider the structure of the page and the css styles you want to use.
   
   If you're still contemplating on using tables, then you really should go back to the year 2000 because it makes more sense now a days to use "tableless" div based css to structure your pages.
   
   Whether you are a novice or a professional, you are going to love YUI's CSS Tools, in particular, the CSS Grid. It is actually just one CSS file but it allows you to, as the developer page boasts, create 1000 page-combination layouts with just a 4kb style sheet file. Amazing!
   
   Furthermore, the preset templates are guaranteed to work across what Yahoo calls A-Grade browsers. At present, Yahoo considers IE7, Firefox 2 and Safari 3 A-Grade. Not only is most of the foundation work done for you, you can also rest assured that what you are using is compatible across the major Web browsers.
   
   So don't build your css from scratch, start with the YUI CSS Grid tool.
   
   If you're not convinced, open your Google home page in Firefox and inspect the page elements with firebug. If you have read the YUI developer page for the CSS Grid, you will notice that, yes, Google uses it on your Google personal home page.
   
2. On having layout
   
   Have you had cases where the background image on an HTML element looks okay on Firefox but seems misaligned on IE? What about instances where elements float properly on Firefox but don't on IE? If you have been developing pages on the front-end long enough, I'm sure you will answer yes to both questions.
   
   I came across this article entitled "On having layout" and it tries to explain in detail how and why many of these problems could be solved by simply giving the element "layout".
   
   So what exactly does layout mean. According to the article, 

   "'Layout' is an IE/Win proprietary concept that determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events."
   
   Take note, it's an IE/Win proprietary concept.
   
   Some HTML elements like table, img, or input have layout by default but a div does not. Since we're building our page mostly on div elements, you can see why these so called "rendering issues" are such a pain and why there are those who just give up and go back to using tables.
   
   However, it's not hard to give a div element "layout". One way suggested by the article is by setting dimensions like height or width for the div element.
   
   Read the article for more information and tips on giving "layout" to HTML elements and avoiding those "rendering issues" on IE.
   

3. Doc Types and Quirksmode
   
   Back in the day, it was each browser to itself and, as a result, Web development was horribly time consuming and consistency across different browsers was hard to manage.
   
   There's no doubt about it, there was a need to define standards and the browser makers need to stick to it.
   
   However, standards solved one problem but it also created another one. If browser makers were to suddenly release standards-compliant versions of their browsers, many many Web pages that don't follow the standard, but rather the quirks of the browsers, will suddenly become broken.
   
   Enter the doctype. The doctype allows a developer to choose between 2 modes. The article I found explains that,  

   "...all browsers needed two modes:  quirks mode for the old rules, strict mode for the standard. Explorer Mac was the first browser to implement the two modes, and Explorer Windows 6, Mozilla, Safari, and Opera followed suit. Explorer 5 Windows, as well as older article browsers like Netscape 4, are permanently locked in quirks mode.
   
   Quirksmode.org has a detailed description of the two modes and how they affect different aspects of the page in different browsers.
   

4. Dean Edward's IE7 JavaScript file
   
   Wouldn't it be amazing if you can include a file of some sort on your page and it would instantaneously make your page work consistently across all versions of IE? Well, look no further because there is such a file and it's Dean Edwards's IE7.js.
   
   So, what is IE7.js?

"IE7 is a JavaScript library to make MSIE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6.

It's really a great solution that works but I ended up not using it because:

1. It's a JavaScript solution. Hence, if JavaScript is off, well, you know what happens.
2. Load time for me was slow. I figured out later on that it was due to how css was defined. It seems that if you use a lot of wild card selectors it slows down execution time of the script. I was using extjs for this project and I just couldn't change all the css to not use wild card selectors.

Early last week Caroline asked me if I could actually write this blog entry knowing that IE was the subject without swearing. I think I did a pretty good job, don't you think? :-)