How do you do when dealing with cross-browser web development?

Hi friends,

I just want to know that how do you do when you’re dealing with cross-browser web development.

Which tools you are using?

How do you handle those all buggies browser?

What experiences you faced?

As I’m dealing with cross-browser web development project where I generally strict with XHTML 1.0 standard. (As I’m using Microsoft Visual Studio 2005 and there is built-in XHTML 1.0 validator. Also, it has a built-in CSS validator too.)

I generally focus to most popular browsers including Internet Explorer 6.x, 7.x and Mozilla Firefox 2.x.

Below is my experiences and how I handle the project after I failed one. Yes, I failed one! Don’t get wrong like me! It waste your valuable time.

Internet Explorer 7.x, I love this one as it’s easiest to work with while I’m using Visual Studio 2005. For me, it’s not that hard to make Internet Explorer 7.x render HTML as I want.

Next, Firefox is ok but need some care to make it render HTML as you want.

Last, Internet Explorer 6.x is sucks for me as it made me headache over a few nights to get pass its rendering issues. Did you believe that if your pages crash. It might cause you’re using some standard CSS the wrong way (IE6 wrong way) such as float:left; Yes, it can crash most of IE6. Just try to googling for “IE6 float:left crash” and you gonna see the weird thing.

So, If you gonna begin on cross-browser web development. I suggests to go this way…

1. Open up your Visual Studio 2005, for your all pages (.aspx, .html). Set the HTML validator to “XHTML 1.0 Transitional”. This will let Visual Studio 2005 warn you when you not follow the XHTML 1.0 standard. Which is a good way to go. (Don’t go with later version of XHTML as It seems IE6 didn’t fully support it)

2. When working with CSS files. Set your CSS validator to “Internet Explorer 6.0″ or “CSS 1.0″. Don’t go later version for safety. Believe me, less version = less pain.

3. Using your targeted browsers to test your page layout in step-by-step. Do it strictly or you will entering the impossible to solve state after your hard work. I’m using IE7 as the main one. Then using Firefox in the same machine. For IE6, I go with Virtual PC. Yes, I’m working like this actually!

If you follow these 3 steps strictly. You will never get wrong with cross-browser issue like me. When I got this pain, I’ve to waste my time to re-architecture all pages layout.

More tips…

- If you’re using “float:left;” just follow with “display:inline;” to avoid the silly bug of IE6.

- If you’re in design state. Don’t go with table layout. Force yourself to go with table-less layout. Yes, I means using <DIV> instead of <TABLE>. Googling “tableless layout css” for more information. Strictly follow this! or you gonna hate IE later. Forget all about <TABLE>, it’s history now.

Conclusions

I’m very appreciated to receive all comments. Maybe your experiences or tips or …

Thanks you,