Not know much about css and purely a Java/J2EE developer but some how got strucked in some css puzzle which i am unable to solve

i was using a form with some Jquery light box effect which has a div with id and 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 saw 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 getting displayed properly in Mozilla but on Google chrome and IE the box was not coming properly like only some part of it and rest as a scroll bar.

when i saw it through firebug (used first time :)) it 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 same settings it was not coming properly for IE and Mozilla so after lots of Goggling i did following changes to css

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

i fixed the height by height:380px !important;

though this fixed my issue but being no idea 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

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.

Not know much about css and purely a Java/J2EE developer but some how got strucked in some css puzzle which i am unable to solve

i was using a form with some Jquery light box effect which has a div with id and 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 saw 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 getting displayed properly in Mozilla but on Google chrome and IE the box was not coming properly like only some part of it and rest as a scroll bar.

when i saw it through firebug (used first time :)) it showing me something like

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

and for same settings it was not coming properly for IE and Mozilla so after lots of Goggling i did following changes to css

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

i fixed the height by height:380px !important;

though this fixed my issue but being no idea 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

Not know much about css and purely a Java/J2EE developer but some how got strucked in some css puzzle which i am unable to solve

i was using a form with some Jquery light box effect which has a div with id and 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 saw 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 getting displayed properly in Mozilla but on Google chrome and IE the box was not coming properly like only some part of it and rest as a scroll bar.

when i saw it through firebug (used first time :)) it 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 same settings it was not coming properly for IE and Mozilla so after lots of Goggling i did following changes to css

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

i fixed the height by height:380px !important;

though this fixed my issue but being no idea 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