How to suit a table to mozilla

The following page has no problem in IE but in mozilla
it have no proportion the text is getting big and more
please look at the link -
http://www.coarch.co.il/123/raw/vanadium.html
I try to change the CSS file to %
but it didn't work
what should i do?
the CSS file

#content{
	background: url(../images/page6.png) no-repeat bottom center;
	text-align: left;
	position: relative;

}

.mainText{
	position: relative;
	font: normal 11px arial;
	top: 70px;
	left: 97px;
	width: 50%;
	height: auto;
	color: #393839;
	border: solid 0px BLACK;
         display: inline;
        overflow:hidden;
        clear:both;
}
.paragraph2{
	position: absolute;
	font: bold 13px arial;
	top: 430px;
	left: 600px;
	width: 350px;
	height: auto;
	color: #5A5D5A;
	border: solid 0px BLACK;
}
.paragraph3{
	position: absolute;
	font: bold 13px arial;
	top: 530px;
	left: 560px;
	width: 390px;
	height: auto;
	color: #5A5D5A;
	border: solid 0px BLACK;
}
#puzzle{
	background: url(../images/puzzle.png) no-repeat top center;
	
	position: absolute;
	top: 259px;
	left: 13px;
	
	width: 76px;
	height: 337px;
}
.img1{
	position: absolute;
	top: 10px;
	left: 25px;
}
.img2{
	position: absolute;
	top: 73px;
	left: 25px;
}
.img3{
	position: absolute;
	top: 149px;
	left: 25px;
}
.img4{
	position: absolute;
	top: 214px;
	left: 25px;
}
.img5{
	position: absolute;
	top: 283px;
	left: 25px;
}

.clear { clear: both; }

Code (markup):

 

"I try to change the CSS file to %"

WTF does that mean?

 

I try to change the px to %
the problem is that text size is change