Does NOT work with IE 1

[cumap]

hi all,
I'm getting this display problem only happens with IE while Firefox doing just fine.
Here's the code

<script language="javascript">
<!--
function getValue()
{
//add text
var text=document.proof.myHeader.value;
document.getElementById('yes').innerHTML = text;
//change color
var tcolor=document.proof.myTextColor.value;
if (tcolor!='') {
	document.getElementById('yes').style.color = tcolor;
	}
}

var min=30;
var max=100;
var count=0;
function increaseFontSize() {
	var p = document.getElementById('yes');
	if(p.style.fontSize) {
	 var s = parseInt(p.style.fontSize.replace("px",""));
	 var m = parseInt(p.style.top.replace("px",""));
	}
	if(s!=max) {
	 s += 10;
	 m -= 6;
	}
	p.style.fontSize = s+"px";
	p.style.top = m+"px"
}
function decreaseFontSize() {
	var p = document.getElementById('yes');
      if(p.style.fontSize) {
         var s = parseInt(p.style.fontSize.replace("px",""));
		 var m = parseInt(p.style.top.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 10;
		 m += 6;
      }
      p.style.fontSize = s+"px";
	  p.style.top = m+"px"
}

// -->
</script>

<table width="100%"><tr><td>
<div style="position:relative; float:left; margin:0; padding:0; width:756px; height:250px; overflow:hidden; border:0px solid #ff0000; left:0; top:0;">
    <img name="ShowRoom" src="images/Clear.jpg" height="250" width="756" />
    <div id="yes" style="position:absolute; float:left; margin:0; padding:0; width:756px; top:65px; border:0px solid #ccc; color:#ff0000; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:100px; text-align:center"></div>
</div>
<div style="position:absolute; float:left; left:696px; top:230px"><input type="button" value=" - " onClick="javascript:decreaseFontSize();" />&nbsp;<input type="button" value="+" onClick="javascript:increaseFontSize();" /></div>
<BR />
</td></tr></table>
<form name="proof" action="testbuilda.html" method="get">
<table>
	<tr>
    	<td valign="top">
          Sample Text: <input name="myHeader" type="text" /><BR />
          Text Color: <select name="myTextColor" onChange="getValue()">
            <option value="black">Black</option>
            <option value="white">White</option>
          </select>&nbsp;<input type="button" onClick="getValue()" value="Preview" />
        </td>
    </tr>
</table>
</form>

Thanks!

 

[cumap]

Sorry, forgot to specify the "display problem" which is NO input text displayed in the specified area when clicked at all.

 

[BillyRayPreachersSon]

Changing 'float:left' for 'left:0' on your 'yes' DIV styles fixes it for me...

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[cumap]

YES!!!!

Thank you very much Dan. To think this was a js problem while css is the trouble one.

Thanks again.