CSS Incompatibilities

We all know that different browsers display our CSS differently. What are the major differences? Here is what I found from my own experience (often the hard way):

  • IE doesn’t support table, table-cell, etc. for the display property; 
  • IE includes the padding in its width (width:50px & padding:3px will total 50px in IE and 56px in Firefox)
  • IE doesn’t support properties such as max-width, min-height, etc.
  • Firefox has some of it’s own CSS rules (moz-css) which are not supported by any other browsers
  • IE adds a margin to its forms

There are tons of other differences that you can add to this list. I solve most of my layout problems with one or two tables for the most complex parts, thus saving myself hours of debugging and tweaking.

P.S.: use lists instead of tables for your horizontal menus (for god’s sake!)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">