Save A Developer. Upgrade Your Browser.

I recently came across a website with a distinct cause, one that I support 100%. That site is savethedevelopers.org and their purpose is to improve the health of developers across the world by decreasing the stress involved in developing cross-browser compatible websites.

For those of you who have no idea what I am talking about when I say cross-browser compatibility. Web browsers, like Internet Explorer, FireFox, Safari and Opera read code, the code that web developers create. Each web browser renders the code differently, basically converting the text into a website you can view and interact with. Cross-browser compatibility is basically developing a website or web application that operates properly on all of the major browsers. Here is the major problem, Internet Explorer 6 never played by the rules, the rules in place to make it easier for developers to make one website that looks and works the same on all browsers.

Here we are nearly 2 years since Internet Explorer 7's release and roughly 25% of all of the internet users in the world still us IE 6. Which leads us to the purpose of savethedevelopers.org is to decrease that percentage to a number that would allow developers to spend less time focusing on making their website cross-browser compatible and more time on features that enrich and improve the user's experience.

You can help the cause like I did, by visiting the site and copying code onto your site that will prompt users browsing with IE 6 to upgrade their browser. So that leaves me with my closing statement...

Save a Developer. Upgrade Your Browser.

CSS Bug: IE6 Div Height Less than Line-Height

I had developed a site for a client recently using css positioning for the layout. I was pleased upon completion, that the site did not differ greatly between Mozilla 2.0, IE7, and Opera 9.1. So I finished the site, uploaded it to production and notified the client it was complete.

A week passes by, my client contacts me and says that the website did not look right. I said ok, what browser are you using? IE6. Hrmm.. He stated that the logo had a blue background and that the text was overlapping. I was surprised. So, first I had to view the site in IE6. Both my desktop and laptop had IE7, so I had to resort to my 4 year old daughters computer which I had remember I had not upgraded to IE7. Wow he was right, so I investigated.

I discovered 2 things. The logo did have a slight blue background and where I had used a div to provide a spacer or a dividing line, it displayed in IE6 as 1 standard line in height. So I researched.

I found that IE6 does not support transparent background for .png images which explains the aqua colored background. I changed the image to a .jpg and that resolved that problem.

Next, I learned that when you have an empty div tag, IE6 inserts an empty text-element. So even thought there is no text, it is viewing as if there is an &NBSP in the div.

The workaround:
There are two really. You can use CSS to set the line-height:0px. Or you can enter a html comment into the div tag. I opted for the html comment, and it worked flawlessly.