Jump to content
Sign in to follow this  
mboehler3

Text Pushes Input Box In Ie6, Ie7

Recommended Posts

Hi, here is what my problem looks like:form-break.jpgAs 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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...