Question

I don’t know much about CSS (I’m purely a Java/J2EE developer), but I somehow got stuck with a CSS puzzle which I am unable to solve.

I was using a form with a jQuery light box effect which has a div with an id and a class:

<div id="contact-container"
     class="myclass"
     style="z-index: 1002; height: 386px; width: 450px; position: fixed; left: 406.5px; top: 15%; ">

In my CSS file, I’m using the following entry:

#contact-container {
    font: 16px/22px 'Trebuchet MS', Verdana, Arial;
    text-align:left;
    width:450px;
}

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.

When I saw it through firebug (my first time using it :)), it’s showing me something like:

<div id="contact-container"
     class="myclass" 
     style="position: fixed; z-index: 1002; height: 67px; width: 450px; left: 406.5px; top: 15%;">

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 CSS:

#contact-container {
    font: 16px/22px 'Trebuchet MS', Verdana, Arial;
    text-align:left;
    width:450px;
    height:380px !important;
}

I fixed the height using height:380px !important;, 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.

Please suggest if I have adopted a wrong approach.

Answer 1

!important is a useful tool, but the drawback is that it’s kind of a tool of last resort. So you don’t want to over-use it as you’ll end up causing headaches down the road for anyone that’s maintaining the site.

However, your example is a typical use. What is happening is that the JS is injecting inline style attributes on the fly. As such, that’s over-riding the cascade in your CSS. !important allows you to over-ride that.