Agonizing over IE6

As you might have noticed, I have changed the design of my site again. This time I have revamped the layout, added some extra features, validated the HTML and also the CSS . It took about a week of pondering and mulling over some possible layouts, days of searching for the right design and another week of putting pieces of CSS codes together.

I have tried and tested my site on browsers like Firefox, Internet Explorer 7, Opera and even Safari. It all turned out the way it should. However the one browser that I have left out was on Internet Explorer 6 (IE6). The reason was because I don’t have IE6 anymore on any of my computers. So I assumed that it should look alright on IE6 also.

This is one mistake for a beginner like me in building a website that is easily overlooked. My page looked downright badly composed if not hideous when viewed via IE6 as I checked later on. The right sidebar content was totally misplaced and my navigation bar was somehow mispositioned.

So it took me another week to hack IE6 bugs that caused all the layout problems. After some research over the Internet, I found out that IE6 has been known as a nightmare for website designers, so I’m not alone . If you are planning to build a website, keep these in mind:

• Always crosscheck the layout of your site on various browsers including IE6. A page that looks alright in Firefox might turn out looking disastrous on IE or Opera. This is because different browsers can sometimes interpret CSS commands differently.
• Before debugging your page, it is always advisable to validate your HTML code in your page and also a valid stylesheet (CSS) to come with it.
• The Internet has a HUGE resources on tips and tricks on tweaking your CSS. It always pays to do some research beforehand.
• Use a tool for checking and debugging your CSS code. Firefox has an Add-on which serves this purpose perfectly. I use Firebug. As you can see in the picture above, there is a extra window opened when you activate Firebug on a web page. This window will display the HTML code of the web page and on the right side of the window, its corresponding CSS code. This allows you to inspect and monitor your HTML and CSS codes. That is one real great tool!
• Check out some beautifully CSS designed sites like here, here and here.

These are just a few pointers that I’ve learned while revamping my website. Maybe they might turn out helpful for you , who knows.