Text Pushes Input Box In Ie6, Ie7

[mboehler3]

Hi, here is what my problem looks like:As you can see, when I input a lot of text, the input box gets pushed over to the left, and the text is displayed on the background color. This only happens in IE6 and IE7, as far as I can tell...Here is the form code:

   <script language="JavaScript" src="/quote/960/payroll_check.js" type="text/javascript"></script>	<form class="fpq" action="/quote/instant_price_quote.asp" method="POST" id="quotesform1" name="quotesform1" onSubmit="return checkquotevalues();">	<input name="ReferralCode" type="hidden">	<table cellpadding="0" cellspacing="0" border="0" width="120">	<tr>	<td>	<div id="inputWrap"><input class="tb-condensed bold color727272 fontsize10" type="text" size="30" maxlength="50" id="FirstName" name="FirstName" value="First Name" tabindex="1" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'First Name':this.value;" /></div>	</td>	<td>	<div id="inputWrap"><input class="tb-condensed bold color727272 fontsize10" type="text" size="30" maxlength="50" id="LastName" name="LastName" value="Last Name" tabindex="2" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Last Name':this.value;" /></div>	</td>	</tr>	<tr>	<td>	<div id="inputWrap"><input class="tb-condensed bold color727272 fontsize10" type="text" size="30" maxlength="50" id="Email" name="Email" value="Email" tabindex="3" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Email':this.value;" /></div>	</td>	<td>	<div id="inputWrap"><input class="tb-condensed bold color727272 fontsize10" type="text" size="30" maxlength="50" id="NumberOfEmployees" name="NumberOfEmployees" value="# of Employees" tabindex="4" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'# of Employees':this.value;" /></div>	</td>	</tr>	<tr>	<td colspan="2" valign="middle">	Phone #	<span id="inputWrap" class="lpadding33">	<input class="tb-condensedSm bold color727272 fontsize10" type="text" size="3" maxlength="3" id="text2" name="phone1" value="" tabindex="5" /> <input class="tb-condensedSm bold color727272 fontsize10" type="text" size="3" maxlength="3" id="text1" name="phone2" value="" tabindex="6" /> <input class="tb-condensedMe bold color727272 fontsize10"type="text" size="4" maxlength="4" id="text3" name="phone3" value="" tabindex="7" />	</span>	</td>	</tr>	<tr>	<td colspan="2">	What's Your Payroll Frequency?	<div id="inputWrap">	<select name="PayrollFrequency" tabindex="8" style="width:240px;" />	<option value='0'>Select one</option>	<option value="W">Weekly</option>	<option value="BW">Bi-Weekly</option>	<option value="S">Semi-Monthly</option>	<option value="M">Monthly</option>	</select></div>	</p>	</td>	</tr>	<tr>	<td colspan="2">	What's Your Current Payroll Method?	<div id="inputWrap" style="padding-bottom:5px;">	<select name='PayrollMethod' tabindex="9" style="width:240px;" />	<option value='0'>Select one</option>	<option value='New Business'>New Business</option>	<option value='In House'>In House</option>	<option value='Not Currently Processing'>Not Currently Processing</option>	<option value='Accountant'>Accountant/Bookkeeper</option>	<option value='Payroll Service'>Payroll Service</option>	<option value='PEO/Leasing Company'>PEO/Leasing Company</option>	<option value='Other'>Other</option>	</select></div>	</p>	</td>	</tr>	<tr>	<td colspan="2">	<a target="_blank" href="https://www.scanalert.com/RatingVerify?ref="><img width="115" height="30" border="0" src="//images.scanalert.com/meter/32.gif" alt="HACKER SAFE certified sites prevent over 99.9% of hacker crime." oncontextmenu="alert('Copying Prohibited by Law - HACKER SAFE is a Trademark of ScanAlert'); return false;"></a>	   <input type="image" src="/images/960/payroll/payroll-submit.gif" tabindex="10" alt="Get Instant Quote" id="submit2" name="submit2" />	</td>	</tr>	</table>		<input type="hidden" name="ContactRegarding" value="Q">	<input type="hidden" name="SaveData" value="True">	<input type="hidden" name="ReferralCode" value="<% =fm_refcode%>">		</form>

Are here are the styles:

.tb-condensed {border:0; background: transparent url(/images/v1_1/surechoice/condensed-tb.gif) no-repeat; height: 27px; width: 94px; padding-top:7px; padding-right:20px; padding-left: 10px}.tb-condensedSm {border:0; background: transparent url(/images/v1_1/surechoice/condensed-tbSm.gif) no-repeat top left; height: 27px; width: 40px; padding-top:7px; padding-left:5px;}.tb-condensedMe {border:0; background: transparent url(/images/v1_1/surechoice/condensed-tbMe.gif) no-repeat top left; height: 27px; width: 60px; padding-top:7px; padding-left:5px;}#inputWrap {}

Thanks for any help.

[thescientist]

are you using a strict DTD? Do you know that you are only allowed to use ID's once per page?

[mboehler3]

are you using a strict DTD? Do you know that you are only allowed to use ID's once per page?

I'm using

<!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">

The inputWrap isn't defined anywhere on my style sheet, I just thought I should reference it in this post so you will see it has no styles to it

[thescientist]

well, IE behaves a lot better with a Strict DTD and a page that validates to that.

[mboehler3]

well, IE behaves a lot better with a Strict DTD and a page that validates to that.

I changed the DOCTYPE to a strict DTD and the problem still occurs