Hello there
I would like to ask you what general approaches you know to carry out the task of adapting the css which works well for firefox, to make it work the same in explorer or other particular browsers which might raise problems. For example, if you take a glance to (I hope it is not forbidden to mention website with learning purposes) www.metatradersoftware.com, you will be able to realize that the language flag on the upper right side is lower or higher positioned depending on whether the browser you use is explorer 6 or firefox.

So far, the only solution I have heard to avoid these discrepancies is building another css style sheet with the slight modifications required for explorer and importing only the one associated to the corresponding browser. Nevertheless, I would appreciate if anybody could tell me the code I have to put to distinguish which browser is being used among the common different explorers. That would let me carry on with this strategy.

Moreover, if you know another techniques which might be better for this purpose than having several css style sheets and importing the corresponding one to the browser used, I am willing to hear about them as well.
Thanks in advance.

I am building pages that work the same (or very nearly the same) on both.


1. Don't put surrounding styles (margin, border, padding) in the same styles or tags as size styles (height, width), other than to set the other ones to 0.

Internet explorer renders these in the wrong nesting order, causing most of the incompatibilities. The fix is to nest two box objects, one with the surrounding styles, and one with the sizes.

2. Don't use tags wrong. If the browser finds an error in the code (or no doctype), it goes into quirks mode. FF and IE have very different quirks modes.

3. Be aware that IE makes fonts one pixel wider than FF does.

4. Define horizontal and vertical text alignment for tables in styles. IE and FF have different defaults.