Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE hack needed - Unable to set field focus

Status
Not open for further replies.
southbeach

southbeach

Programmer
Jan 22, 2008
879
US
I have a form where I am using <table> to set the layout.

My typical input command looks like this
Code: 
<input name="name" id="nameID" type="text" class="normal" style="width: 100%" size="30" maxlength="45" />

In FF all looks and works great. In IE, however, I cannot click on the fields to place my cursor within the fields (set focus). I have to use the TAB key to get in or click on the very first possible character of the field (far left column within the field).

What gives?



--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.
 
Sort by date Sort by votes
Hard to say. Do you have an example on the net that we could look at? IE is a little clumsier usually when it comes to 100% widths, but in your case it should work.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
It could be floated content or use of the alpha filter as well. Could you post a cut-down test page showing just the problem.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
The page is a custom cargo management that cannot be accessed by general public.

Here is a snippet of code where I am experiencing the problem
Code: 
<tr>
<td valign="top" align="center" class="heading" style="background-color: #9999FF;">SHIPMENT METHOD</td>
<td align="center" class="heading" style="background-color: #9999FF;">CONSIGNEE NAME &amp; ADDRESS</td>
</tr>
<tr>
<td valign="top" align="center">
<div style="text-align: center;" class="normal">
<span style="color: red;">*&nbsp;</span>
<input name="shipmethod" id="method1" type="radio" value="A" onclick="javascript: hideResults(); showPickDate(); ckDate('');"  />AIR&nbsp;&nbsp;
<input name="shipmethod" id="method2" type="radio" value="O" onclick="javascript: hideResults(); showPickDate(); ckDate('');"  />OCEAN&nbsp;&nbsp;
<input name="shipmethod" id="method3" type="radio" value="S" onclick="javascript: hideResults(); showPickDate(); ckDate('');"  />TRUCK / LOCAL DELIVERY
</div>
</td>
<td rowspan="12">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="normal">
<tr>
<td align="right"><span><img src="gif/refresh.gif" border="0" onclick="resetCNEE();" alt="Reset CNEE" /></span>COMPANY NAME&nbsp;<span style="color: red;">*&nbsp;</span></td>
<td><input name="company" id="companyID" value="" type="text" size="30" maxlength="45" style="width: 100%;" onkeyup="javascript: xajax_getCNEE(this.value)" onfocus="javascript: hideResults();"  /></td>
</tr>
<tr>
<td align="right">ADDRESS&nbsp;<span style="color: red;">*&nbsp;</span></td>
<td><input name="addr1" id="addr1ID" value="" type="text" size="30" maxlength="45" style="width: 100%;" onfocus="javascript: hideResults();" /></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td><input name="addr2" id="addr2ID" value="" type="text" size="30" maxlength="45" style="width: 100%;" onfocus="javascript: hideResults();" /></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td><input name="addr3" id="addr3ID" value="" type="text" size="30" maxlength="45" style="width: 100%;" onfocus="javascript: hideResults();" /></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td><input name="addr4" id="addr4ID" value="" type="text" size="30" maxlength="45" style="width: 100%;" onfocus="javascript: hideResults();" /></td>
</tr>
<tr>
<td align="right">COUNTRY&nbsp;<span style="color: red;">*&nbsp;</span></td>
<td><span id="shwCtry">
<select name="country" id="countryID" class="normal" style="width: 100%" onclick="javascript: hideResults();">
	<option value=""></option>
</select></span>
</td>
</tr>
<tr>
<td align="right">CITY&nbsp;<span style="color: red;">*&nbsp;</span></td>
<td><input name="city" id="cityID" value="" type="text" size="30" maxlength="45" style="width: 100%;" onfocus="javascript: hideResults();" /></td>
</tr>
<tr>
<td align="right">STATE&nbsp;</td>
<td><span style="float: left;"><input name="state" id="stateID" value="" type="text" size="2" maxlength="2" onfocus="javascript: hideResults();" /></span><span style="float: right;">ZIP CODE&nbsp;<input name="zip" id="zipID" size="10" type="text" maxlength="10" onfocus="javascript: hideResults();" /></span></td>
</tr>
<tr>
<td align="right">ATTENTION&nbsp;</td>
<td><input name="attention" id="attentionID" value="" type="text" size="30" maxlength="30" style="width: 100%;" onfocus="javascript: hideResults();" /></td>
</tr>
<tr>
<td align="right">PHONE&nbsp;<span style="color: red;">*&nbsp;</span></td>
<td><input name="phone" id="phoneID" value="" type="text" size="30" maxlength="30" style="width: 100%;" onfocus="javascript: hideResults();" /></td>
</tr>
<tr>
<td align="right">FAX&nbsp;</td>
<td><input name="fax" id="faxID" value="" type="text" size="30" maxlength="30" style="width: 100%;" onfocus="javascript: hideResults();" /></td>
</tr>
<tr>
<td align="right">EMAIL&nbsp;<span style="color: red;">*&nbsp;</span></td>
<td><input name="email" id="emailID" value="" type="text" size="30" maxlength="30" style="width: 100%;" onfocus="javascript: hideResults();" /></td>
</tr>
</table>
</td>
</tr>

Here is the CSS
Code: 
.normal {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt}

.heading {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;}

form {
margin-top: 0;
margin-bottom: 0;
}

It happens with both IE 6 and 7 ... Have not tried with beta 8.


Thanks!





--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.
 
Upvote 0 Downvote
When I use your code (in IE6 XP), I have no problem clicking on a field. I placed your html within this code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="content-language" content="en"/>
    <title>Test Harness</title>
    <style type="text/css">
.normal {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt}

.heading {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;}

form {
margin-top: 0;
margin-bottom: 0;
}

    </style>
<body>
<table>

... your code from above...

</table>
</body>
</html>
So apparently, that doesn't include enough to recreate the problem.
Of course, your JavaScript function: hideResults() is not included...

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
I removed the style="width: 100%" and the onfocus="javascript: hideResults();" from all fields and I am still having the same problem.

Here is the JS for hidResults
Code: 
	function hideResults() {
		var myobject = document.getElementById('shwResults');
		if (myobject != null) myobject.style.display='none';
	}

Funny thing is that there is one field where I can gain focus without a fuss, the company name field.

Of course, other fields within the page work as well but not those within the above pasted block of fields.

I do not know what else to try. I checked every line of code and cannot find anything like unclosed tags, unclosed quote(s) or something that may cause un-expected behavior.



--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
707
bdwilcox
bdwilcox
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
750
pmonett
pmonett
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top