Cross-browser CSS

A few days ago, I had to finish up a new website. Nothing fancy and all that, just a basic, simple layout website. As usual, I developed the thing only viewing it in Firefox.  I thought it wouldn’t matter that much to other browsers since it was pretty basic. So after some nice work, I uploaded everything and let the client know his site was online.

After he must have viewed it, he let me know I forgot to post some pages. I didn’t understand what he was talking about, since I knew those pages were available. So I mailed him back with some directions how to navigate too that page. He replied he didn’t know what I was talking about.

And then it struck me. I realised I forgot to view the site first in IE6 en IE7. So I fired up IE6, and found no problem. That was pretty strange, since normally, it is always IE6 that is b*tching the most with CSS layouts. So then I started IE7. And yes, their it was. I navigation bar has disappeared. For some reason, the navigation block was hidden underneath the the page content.

So I started reviewing my CSS code. Seemed like I have to enlarge my header and use less padding for the navigation bar. A small problem, that’s for sure, but it still took me almost 30minutes to figure out that was the problem.

I know that numerous forum threads and other blogposts flame about the problem of css incompatibility between browsers. Well, I won’t because I don’t see any problem…
95 % of all CSS designs work alike under all none-IE browsers. The only browser that works his own way is IE, so it should be very simple for all internet users. Just kick IE out to the curb. Not only for the sake of those poor webdevelopers, but also to protect you from harm of malware and viruses.

So do yourself a favour and download a browser like Firefox or Safari. This would make the internet a better place