title: Is it bad to use !important in a CSS property?
body: <p>I don't know much about CSS (I'm purely a <code>Java/J2EE</code> developer), but I somehow got stuck with a <code>CSS</code> puzzle which I am unable to solve.</p>
  <p>I was using a form with a jQuery light box effect which has a <code>div</code> with an <code>id</code> and a <code>class</code>:</p>
  <pre><code>&lt;div id=&quot;contact-container&quot;
       class=&quot;myclass&quot;
       style=&quot;z-index: 1002; height: 386px; width: 450px; position: fixed; left: 406.5px; top: 15%; &quot;&gt;
  </code></pre>
  <p>In my CSS file, I'm using the following entry:</p>
  <pre><code>#contact-container {
      font: 16px/22px 'Trebuchet MS', Verdana, Arial;
      text-align:left;
      width:450px;
  }
  </code></pre>
  <p>But when this form was displayed as jQuery pop-up, it was getting displayed properly in Mozilla, but on Google Chrome and IE the box was not coming properly: only part of it was being displayed, and was hidden with a scroll bar.</p>
  <p>When I saw it through firebug (my first time using it :)), it's showing me something like:</p>
  <pre><code>&lt;div id=&quot;contact-container&quot;
       class=&quot;myclass&quot; 
       style=&quot;position: fixed; z-index: 1002; height: 67px; width: 450px; left: 406.5px; top: 15%;&quot;&gt;
  </code></pre>
  <p>and for the same settings, it was not coming properly for IE and Mozilla. After lots of Googling, I made the following changes to my <code>CSS</code>:</p>
  <pre><code>#contact-container {
      font: 16px/22px 'Trebuchet MS', Verdana, Arial;
      text-align:left;
      width:450px;
      height:380px !important;
  }
  </code></pre>
  <p>I fixed the height using <code>height:380px !important;</code>, but not knowing much about CSS, I am not sure if this was the right approach, as I searched about height but it was not defined anywhere.</p>
  <p>Please suggest if I have adopted a wrong approach.</p>