Building for IE6

I’ve completed the first month of my 3-month contract with BlueRush and I have learned quite a bit. I have been building an entire site (front-end) for the advisors of an investment firm. The site will basically be used as a marketing tool for the firm’s advisors. The design was provided by Erin Askew and the Flash pieces have been created by Derek Rosien . The back-end is now being hooked up by CTO, Robert Shen and Java Developer, Eddy. This has been a great team to work with, and Derek has patiently taught me how to integrate his Flash work into my pages.

The framework is in place now, but there are still change requests by the client, and I am still awaiting full French translations. One of the requirements was that the site had to work in Internet Explorer 6. This was not actually something we focused on in school, so this proved to be a bit of a challenge. I was using IE Tester, but when tested on the project manager’s computer which had IE6 installed, there were some things that still looked a little different. This obviously caused some frustration, so my husband did something really cool for me on my computer at home. He created a virtual machine within my computer using Virtual Box. By creating a virtual machine, he was able to install the dreaded IE6 (my machine has IE8 installed), which has been very useful for development purposes (but get a real browser already!)

I have heard many people complain about developing for IE6, and although it does have its share of problems, I am pretty happy with my work. I have not had to create many separate styles specifically for IE6 & 7 to make the site look similar. Some of the bigger hacks I had to implement included:

  • Unit PNG Fix in order to display the company logo correctly in IE6. The logo was cut as PNG24 transparency; however, up until IE7, there has been no fully native support for PNG alpha channel transparency in Internet Explorer. Unit PNG Fix uses a little bit of JavaScript to fix that lack of support for transparent png’s. Unit PNG Fix will, by default, run automatically on all PNGs on the page, but you can force the script to only fix specific elements by adding the class “unitPng” to those elements. This will cause only those specified elements to be fixed, and may help you work around any layout issues that the Unit PNG Fix may cause by default.
  • Dropdown menu – I needed to create a vertical dropdown menu with the sub-menu items displayed above the Flash content (or whatever content is on the page). I basically achieved this by setting the z-index for the relevant elements. Of course IE6 & 7 do not understand :hover pseudo class on elements other than on the a-tag, so to get around this issue, I found a small piece of JavaScript which uses the Document Object Model to manipulate the className property of an element. Check out the excellent Suckerfish Dropdown article on A List Apart
  • The client wanted to implement a slide up and down element to certain text-heavy pages. I have worked with jQuery before and wrote some simple code to have content show when the related header was clicked, while ‘hiding’ all the other visible content. This worked in most browsers, except IE6 & 7. At first I thought that maybe it had something to do with my code (not sure why) so I implemented tested code from jQueryUI.com but I noticed that certain content was still behaving oddly (content overlap upon showing and hiding). What I discovered was that this overlap was only occurring if the div in question contained a list. I tried to seek out this problem/solution on the internet, but was unsuccessful so unfortunately, due to time constraints, I had to use p-tags instead. If anyone has experienced this same problem and has a solution, please let me know!

I have also enjoyed learning some very basic Java, and am now responsible for updating the template files, along with creating any relevant jsp documents for new pages. It has definitely been an interesting 4-weeks.

1 Comment
  • vivien
    September 4, 2010

    I can see you have learned a lot about web design through your job. You are lucky to have Nelson helping you with the computer stuff. Enjoy the rest 8 weeks of your contract work.