IE-text input fields "clickable" region is only 1 pixel wide - php

Question

I have a simple input form with input fields that are 3 characters wide. To gain focus to these fields however, I must click the very, very LEFT of the field, about 1 pixel or cursor width wide. The form works fine in Firefox and Safari, where you can click anywhere in the text input field to gain focus.
The form:
<form name=game_edit method=post action="?includepage=game_results.php&gameID=<?=$gameID?>" onsubmit="return validate_form();">
<table border="0" id=gameResults>
<tr><th colspan="4">RESULTS FOR: <?=$gamedate?> HOSTED BY <?=$hostName?></th></tr>
<tr>
<td colspan="2">PLAYERS: <input type=text name=playercount value="<?=$playercount?>" size="3"></td>
<td colspan="2">Championship money colleted: $<?=$champamount?></td>
</tr>
<tr><th>PLAYER</th><th>Place</th><th>Champ Discount</th><th>Didn't play</th></tr>
<? Player_list($gameID); ?>
<tr><td colspan="2"><input type="text" name="manualAdd" size="17" /></td><td colspan="2">Add a username who didn't RSVP</td></tr>
<input type=hidden name=gameID value="<?=$gameID?>">
<tr>
<td colspan="2"><input type=submit name='saveGameResults' value='SAVE CHANGES' style='width:100px;font-size:11px;'></td>
<td colspan="2" align="right"><input type=submit name='saveGameResults' value='LOCK GAME' style='width:100px;font-size:11px;'></td>
</tr>
</table>
The function that writes the fields:
function player_list($gameID)
//////////////////////////////////////////////
// Creates player list for specified //
// game. Provides input for game results. //
//////////////////////////////////////////////
{
//*****Get list of players for gameID*****
$sql = "SELECT rsvpid,rsvp.playerid,concat(fname,' ',lname) as playerName,place,points,freeChamp FROM rsvp LEFT JOIN players ON rsvp.playerid=players.id WHERE rsvp.gameID=$gameID ORDER BY place,lname";
$playerlist = mysql_query($sql);
if ($listrow = mysql_fetch_array($playerlist))
{
#--Get number of players who signed up on the website. This may differ from the actual player count --#
#--entered by the host. A player may have played but not be signed up on the website. --#
echo "<input type=hidden name='recordedPlayerCount' value='".mysql_num_rows($playerlist)."'>";
$i = 0; // index for form rows
do
{
foreach($listrow as $key=>$value) $$key = $value;
($freeChamp) ? $freeChampChecked = "checked" : $freeChampChecked = ""; //check the freechamp box if appropriate.
if ($place==100) $place="";
?>
<tr>
<td><?=$playerName?>:</td>
<td style="text-align:center"><input type=text size="2" name="place<?=$i?>" value="<?=$place?>"></td>
<td style="text-align:center"><input type=checkbox name="freeChamp<?=$i?>" value='true' <?=$freeChampChecked?>></td>
<td style="text-align:center"><input type=checkbox name="noShow<?=$i?>" value='true'></td>
<input type=hidden name="rsvpid<?=$i?>" value="<?=$rsvpid?>">
</tr>
<?
$i++; //increment index for next row
}while ($listrow = mysql_fetch_array($playerlist));
}else
echo "<tr><td colspan='4'>NO RECORDS FOUND FOR THIS GAME!</td></tr>";
}
?>
The offending form field is the "place" field...it is clickable only on the very left of the form field instead of the entire form field, in IE only. (IE 7, that I know of).
Help?

Answer 1

I am willing to bet that the culprit is setting the size of the input element to 2. Give this a shot and let me know if it works any better:
<td style="text-align:center"><input type=text size="3" maxlength="2" name="place<?=$i?>" value="<?=$place?>"></td>
There are other things that I notice in your code:
<tr><th>PLAYER</th><th>Place</th><th>Champ
Discount</th><th>Didn't play</th></tr>
<? Player_list($gameID); ?>
You call the function "Player_list()", but your function is named "player_list()".
foreach($listrow as $key=>$value) $$key = $value;
is the same as:
extract($listrow);

Answer 2

Thanks for the tips, Michael. Found the issue. I have a css-driven horizontal dropdown menu (http://www.udm4.com/) in a header div that drops down over the content div's. Above that, I have a javascript-driven login panel that can drop down over the header div. In playing around with the z-indexes so that everything played nice, I set the content div that holds the form to a z-index of -1. Even after taking out everything except that one div and that one form, IE doesn't like negative z-indexes. I don't know if negative z-indexes constitute valid CSS and IE is just being a tard again, or if other browsers are just too lenient.