Best way to solve the 'padding' css problem

Question

<div style='width:500px; height:500px; padding:50px;'> </div>

As the behaviors of 'padding' on IE and Firefox are different. What is the best way to solve this problem?

Answer 1

Not only are the behaviors different between Firefox and IE...they're different even between the different versions of IE.

The best approach is to use CSS selectors rather than inline styles and use IE conditional comments to load different stylesheets based on browser version. It allows you to create one master stylesheet and then fix any anomolies in the others.

Answer 2

Another option is to put in a conditional comment for a particular browser you're having trouble with for example:

<!--[if IE 6]>
     <style type="text/css">
          #thisdiv { width:500px; height:500px; padding:50px; }
     </style>
<![endif]-->

I'm not sure this is the best way but I don't think anyone has this really figured out. I think we all just do our best and hope that things get better over time so this stuff isn't needed.