One of the most frustrating things for the web designer is coming up with a final design that works well in all browsers. The big six are primary targets: Mozilla Firefox for Windows and Mac, Internet Explorer (IE), Opera for Windows and Mac, Safari, Netscape for Windows, and Camino for Mac. Getting a site to actually behave as desired in all of these can lead one to scream.

For some reason, IE seems to be the most tempermental. Microsoft has not done a great job implementing CSS layout. Want a DIV styled with a 5 pixels margin on the right side? No problem for most browsers. IE will take those 5 pixels, and double them. Suddenly your 800 pixel wide web page, which opened up beautifully moments ago in any browser, breaks horribly in IE. DIVs fall under DIVs, entire blocks vanish, only to reappear somewhere off to the side on the page. Your web creation has fallen.

There are solutions. I prefer not to call them “hacks,” although some like the term. “Hack” has a crafty sound to it, like we’re outsmarting those who designed the world’s very first browser. But they’re not hacks. They’re simply learning to deal with the shortcomings of the browser in front of us and make our code work.

One ideal solution to the margin fiasco in IE is very simple:

display: inline;

Take a look at this solution from positioniseverything.net. It is a simple stroke of brilliance. One simple line to a class or DIV brings us down off the walls we were climbing.

Funny how so many of the world’s solutions come to us in moments of serindipity.

We can’t design any more telling the world, “This page viewed best in Firefox.” We have to adapt. We may not like the browser the user employs to journey the web, but we have to live with it. In spite of the horrible coding and implementation of specifications in IE, if our page breaks, in the end IE will not look foolish.

We will.