I have been designing a small table that has a calculation box in it. In IE it works great. In Firefox it doesn’t.
I want the height of the textarea to be 100% of the content within the textarea. In IE it is a matter of putting an overflow:visible; However, in Firefox it is automatically scrolling the textarea.
Could someone check it out in IE and then in FireFox and let me know how to get the overflow:visible; working in FF.
[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<style type=”text/css”>
.showtextbox {border:1px solid #505050; overflow:visible; width:95%;
font-style:normal; font-weight:normal; font-size:8pt; color:#505050;
background-color:#FFFFFF; display:block;}
.subheadings {text-align:center; font-weight:bold; font-size:8pt; color:#FFDF56; background-color:#222380;}
.tablecontent {text-align:left; padding:10px 5px 10px 5px; color:#505050; background-color:#FFFFFF; border:1px solid #222380;}
</style>
<script language=”javascript” type=”text/javascript”>
function RoundDollar(amt, decimals)
{
var result1 = amt * Math.pow(10, decimals)
var result2 = Math.round(result1)
var result3 = result2 / Math.pow(10, decimals)
return (result3)
}
function CalculateTax(income, show)
{
// declare arrays for data from tax table
var taxrate = new Array(11)
var basictax = new Array(10)
var incomelevel = new Array(10)
var cnt, bracket
taxrate[0] = 0.00; incomelevel[0] = 8012; basictax[0] = 0
taxrate[1] = 0.16; incomelevel[1] = 11118; basictax[1] = 496.96
taxrate[2] = 0.281; incomelevel[2] = 14193; basictax[2] = 1361.04
taxrate[3] = 0.2205; incomelevel[3] = 33375; basictax[3] = 5590.67
taxrate[4] = 0.2515; incomelevel[4] = 35000; basictax[4] = 5999.36
taxrate[5] = 0.3115; incomelevel[5] = 58768; basictax[5] = 13403.09
taxrate[6] = 0.3298; incomelevel[6] = 66752; basictax[6] = 16036.21
taxrate[7] = 0.3539; incomelevel[7] = 69238; basictax[7] = 16916.01
taxrate[8] = 0.3941; incomelevel[8] = 70000; basictax[8] = 17216.31
taxrate[9] = 0.4341; incomelevel[9] = 113804; basictax[9] = 36231.63
taxrate[10] = 0.4641;
// reset counter
cnt = 0
bracket = 0
if(show){
document.TaxBox.TaxTextBox.value = “Income Tax Calculation:nn”
// if income is higher than exempt limit then determine which income level they are at
if(income > incomelevel[0]){
// write the beginning bracket tax info
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “$0″ + ” – $” + incomelevel[0] + “n”
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “Tax Due: Exempt” + “nn”
// loop through all tax brackets and write income bracket & tax info
for(cnt = 1; cnt < incomelevel.length; cnt++){
// if income is higher then previous bracket
if(income > incomelevel[cnt-1]){
// if income is within the current bracket write info
if(income <= incomelevel[cnt]){
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “$” + (incomelevel[cnt-1]+1) + ” – $” + income + “n”
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “Tax Due: $” + RoundDollar((income – incomelevel[cnt-1]) * taxrate[cnt], 2) + “nn”
// set bracket to the right bracket number
bracket = cnt
} // end if
// if income is higher then current bracket write basic tax info
if(income > incomelevel[cnt]){
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “$” + (incomelevel[cnt-1]+1) + ” – $” + incomelevel[cnt] + “n”
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “Tax Due: $” + RoundDollar(basictax[cnt]-basictax[cnt-1], 2) + “nn”
} // end if
} // end if
} // end for
// if income is higher than the highest bracket write that bracket info
// if not return the current value.
if(income > incomelevel[incomelevel.length-1]){
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “$” + (incomelevel[incomelevel.length-1]+1) + ” – $” + income + “n”
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “Tax Due: $” + RoundDollar((income – incomelevel[incomelevel.length-1]) * taxrate[taxrate.length-1], 2) + “nn”
bracket = incomelevel.length-1
}
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “nTotal Tax Due: $” + RoundDollar(((income – incomelevel[bracket-1]) * taxrate[bracket]) + basictax[bracket-1], 2)
}else{ // else if the income is tax exempt return 0 tax payable
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “$0″ + ” – $” + income + “n”
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “Tax Due: Exempt” + “nn”
return (0)
} // end else
}else{ // else if you don’t want to show calculations
for(cnt = 1; cnt < incomelevel.length; cnt++){
// if income is higher then previous bracket
if((income > incomelevel[cnt-1]) && (income <= incomelevel[cnt])){
// set bracket to the right bracket number
bracket = cnt
} // end if
} // end for
if(income > incomelevel[incomelevel.length-1]){ bracket = incomelevel.length-1}
return (RoundDollar(((income – incomelevel[bracket-1]) * taxrate[bracket]) + basictax[bracket-1], 2))
} // end else(show)
} // end function
</script>
</head>
<body style=”font-family:Arial, Helvetica, sans-serif; font-size:8pt;”>
<center><table cellspacing=”0″ width=”150″>
<!– open 1st row for heading –>
<tr>
<!– open the cell –>
<td class=”subheadings” style=”background-color:#960014;”>
Example Calculation:
</td><!– closes the cell –>
</tr> <!– closes the 1 row for heading –>
<!– opens second row for the data blurb –>
<tr>
<!– opens cell with Term Insurance blub & button to quote –>
<td class=”tablecontent” style=”border-color:#960014;”>
To calculate your income tax enter your income in the box below:<br>
<form name=”TaxBox” class=”text8″>
<center>Income: <input type=”text” size=”8″ name=”UserIncome” /></center>
<br>
<center><input class=”buttons” type=”button” value=”Calculate Tax” onClick=”if(document.TaxBox.UserIncome.value > 0){CalculateTax(document.TaxBox.UserIncome.value, true)}else{document.TaxBox.TaxTextBox.value = ‘Im sorry please enter a valid income.’}”></center>
<br>
<br>
<center><textarea name=”TaxTextBox” rows=”3″ class=”showtextbox” readonly>Your calculations will show here.</textarea>
</form>
</td><!– closes the cell with Term Insurance –>
</tr> <!– closes the 2nd row for Term Insurance –>
</table></center> <!– closes the table for Term Insurance –>
</body>
</html>