CSS Not rendering same in different browsers

Hello Experts
I have a CSS being used by different aspx pages. The page does not renders in same way on firefox and IE. The text appears to be cut. I was able to adjust the text but I am looking for more recommendations on this to adjust the behaviours for different browsers

div.header {
      cursor:pointer;
      height:22px;
      width:250px;
      background-position:0px 0;
      background-repeat:no-repeat;
}

div.contents.on div.header {
      background-position:0 -22px;
}

ul.navSection{
      display:block;
}


div.contents.on ul.navSection{
      display:block;
}


div.contents.on{
      display:block;
}




 P.basic-paragraph {
      TEXT-ALIGN: justify; FONT-VARIANT: normal; FONT-STYLE: normal; TEXT-INDENT: 0em; MARGIN: 0em; FONT-FAMILY: 'Arial'; COLOR: #000000; FONT-SIZE: 1em; FONT-WEIGHT: normal; TEXT-DECORATION: none; width:660px; overflow:hidden
      
}
 .lineDivider {
      BORDER-BOTTOM: #000000 1px solid; HEIGHT: 4px; BORDER-TOP: #000000 3px solid
}
 .dekCopy {
      TEXT-ALIGN: center; LINE-HEIGHT: 28px; TEXT-TRANSFORM: uppercase; FONT-STYLE: italic; MARGIN: 0px 0px 22px; FONT-FAMILY: Georgia; COLOR: #4b4b4b; FONT-SIZE: 20px; width:660px
}
.Description {
      TEXT-ALIGN: justify; LINE-HEIGHT: 18px; WIDTH: 660px; FONT-FAMILY: Arial; FONT-SIZE: 12px; overflow:hidden
}
 .Description-image-caption {
      FONT-FAMILY: Arial; COLOR: #898989; FONT-SIZE: 11px; PADDING-TOP: 8px; width:660px
}
 .History {
      FONT-STYLE: italic; COLOR: #898989; FONT-SIZE: 11px
}

.onLeftbar {
      TEXT-ALIGN: justify; TEXT-INDENT: 0em; WIDTH: 300px; PADDING-RIGHT: 20px; FONT: 1em/18px 'Arial'; FLOAT: left; COLOR: #000000; TEXT-DECORATION: none
}
.onRightbar {
      PADDING-LEFT: 0px; WIDTH: 333px; FLOAT: right
}
.heading-paragraph {
      TEXT-ALIGN: justify; FONT-VARIANT: normal; FONT-STYLE: normal; TEXT-INDENT: 0px; MARGIN: 0px; FONT-FAMILY: 'ITC Fenice Std'; COLOR: #000000; FONT-SIZE: 16pt; FONT-WEIGHT: normal; TEXT-DECORATION: none
}

 .HistoryDesc {
      COLOR: #949599
}
 .HistoryTitle {
      TEXT-TRANSFORM: uppercase; FONT-FAMILY: heading-paragraphs New Roman,serif; FONT-SIZE: 16px; FONT-WEIGHT: bold
}
 .addRight {
      POSITION: relative; WIDTH: 270px; FLOAT: left; LEFT: 120px
}
 .addLeft {
      POSITION: relative; WIDTH: 270px; FLOAT: left; LEFT: 60px
}

.onRightER {
      TEXT-ALIGN: justify; TEXT-INDENT: 0em; PADDING-LEFT: 34px; WIDTH: 280px; FONT: 1em/18px 'Arial'; FLOAT: left; COLOR: #000000; TEXT-DECORATION: none
}
.onLeftER {
      PADDING-LEFT: 0px; WIDTH: 336px; FLOAT: left
}

 .Stamp {
      TEXT-ALIGN: justify; FONT-VARIANT: normal; FONT-STYLE: normal; TEXT-INDENT: 0em; MARGIN: 0em; FONT-FAMILY: 'ITC Fenice Std'; COLOR: #000000; FONT-SIZE: 23pt; FONT-WEIGHT: normal; TEXT-DECORATION: none
}
 
Please suggest what other changes I can make to this CSS so it renders correctly in different browsers. The font appears little different in firefox and text appears to be cut on the page. I am also looking for other recommendation for any  imporovemtn which I might be lacking here. May be relative positioning or absolute positioning for DIV tab to adjust them?