Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1097
  • Last Modified:

Submit Button not displaying properly in IE

In Firefox, the submit button is fine, in IE it is truncated and cuts off part of the word "order".

I cannot code below a certain point as indicated in the code with  *********************

Suggestions?
<table width='100%'>
    <tr>
        <td width='100%'>
            <table width='100%'>
                <tr>
                    <td>
                        </td></tr></table></table><style>body 
	{
		margin:0;padding:1px;
		font-family:arial;
		font-size:12px;
	}
 
 
table,td 
{
	padding:1;border-width:0;border-collapse:collapse;border-spacing: 0px;border-style: none;float:none;font-size: 12px;
}
td.sale-header
{
    color: #FFFFFF;
    background-color: #C0C0C0;
    padding: 2px;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}
.sale-orderbutton np inf-button
{
width: 200px;
text-align: center;
}
</style>
<table align="center"><tr><td><table><tr><td>
<table width="100%" id="top" 
        style="background-position: center top; background-image: url('http://www.fbanalysis.com/img/saleform-header.jpg'); background-repeat: no-repeat;">
	<tr>
		<td width="50%"></td>
		
					<td width="849" height="118"></td>
				
		<td width="50%"></td>
	</tr>
    <tr><td colspan="3" align="center">
*******************************************************************************************************
<style>.sale-header {color:#FFFFFF; background-color: #000000; padding: 4px}</style>
<form id="orderForm" action="https://drberg.infusionsoft.com/AddForms/processFormSecure.jsp" method='Post'>
<input type="hidden" name="xid" id="xid" value="f31800bb34c0547c773dbf4419f62dc9" />
<input type="hidden" name="type" id="type" value="CustomFormSale" />
<input type="hidden" name="CAttempt" id="CAttempt" />
<table cellspacing=0 cellpadding=3 class='sale-table'>
<tr><td colspan="99" height="10"></td></tr>
<tr><td colspan=99 class='sale-header'>Contact Information</td></tr>
		<tr><td class='sale-label-req'>First Name *</td><td class='sale-label-req'><input type='text' name='Contact0FirstName' value=''></td></tr>
		<tr><td class='sale-label-req'>Last Name *</td><td class='sale-label-req'><input type='text' name='Contact0LastName' value=''></td></tr>
		<tr><td class='sale-label-req'>Email *</td><td class='sale-label-req'><input type='text' name='Contact0Email' value=''></td></tr>
<tr><td colspan="99" height="10"></td></tr>
<tr><td colspan=99 class='sale-header'>Billing Address</td></tr>
<tr><td class="sale-label-req" valign="top" nowrap="nowrap">Street Address 1 <span class='sale-req'>*</span></td><td id="Contact0StreetAddress1_data" valign="top" align="left"><table cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<td><input size="35" class="sale-text-req" type="text" name="Contact0StreetAddress1" id="Contact0StreetAddress1" /></td>
</tr>
</table>
</td></tr>
<tr><td class="sale-label" valign="top" nowrap="nowrap">Street Address 2</td><td id="Contact0StreetAddress2_data" valign="top" align="left"><table cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<td><input size="35" class="sale-text" type="text" name="Contact0StreetAddress2" id="Contact0StreetAddress2" /></td>
</tr>
</table>
</td></tr>
<tr><td class="sale-label-req" valign="top" nowrap="nowrap">City <span class='sale-req'>*</span></td><td id="Contact0City_data" valign="top" align="left"><table cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<td><input size="25" class="sale-text-req" type="text" name="Contact0City" id="Contact0City" onBlur="calcTotals()" /></td>
</tr>
</table>
</td></tr>
<tr><td class="sale-label-req" valign="top" nowrap="nowrap">State <span class='sale-req'>*</span></td><td id="Contact0State_data" valign="top" align="left"><table cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<td><input size="5" class="sale-text-req" type="text" name="Contact0State" id="Contact0State" onBlur="calcTotals()" /></td>
</tr>
</table>
</td></tr>
<tr><td class="sale-label-req" valign="top" nowrap="nowrap">Postal Code <span class='sale-req'>*</span></td><td id="Contact0PostalCode_data" valign="top" align="left"><table cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<td><input size="15" class="sale-text-req" type="text" name="Contact0PostalCode" id="Contact0PostalCode" /></td>
</tr>
</table>
</td></tr>
<tr><td class="sale-label" valign="top" nowrap="nowrap">Country</td><td id="Contact0Country_data" valign="top" align="left"><table cellpadding="0px" cellspacing="0px" border="0px"><tr><td><select class="inf-select sale-text"   id="Contact0Country" name="Contact0Country" onChange="calcTotals()"><option value="">Please select a country</option><option value="Argentina">Argentina</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Bolivia">Bolivia</option>
<option value="Brazil">Brazil</option>
<option value="Canada">Canada</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Central America">Central America</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Colombia">Colombia</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Ecuador">Ecuador</option>
<option value="El Salvador">El Salvador</option>
<option value="England">England</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Greece">Greece</option>
<option value="Greenland">Greenland</option>
<option value="Guatemala">Guatemala</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong SAR">Hong Kong SAR</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="Ireland">Ireland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Japan">Japan</option>
<option value="Korea">Korea</option>
<option value="Lebanon">Lebanon</option>
<option value="Mexico">Mexico</option>
<option value="Netherlands">Netherlands</option>
<option value="The">The</option>
<option value="New Zealand">New Zealand</option>
<option value="Norway">Norway</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Portugal">Portugal</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Russia">Russia</option>
<option value="Scotland">Scotland</option>
<option value="South Africa">South Africa</option>
<option value="Spain">Spain</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Taiwan">Taiwan</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States" selected="selected">United States</option>
<option value="Venezuela">Venezuela</option>
</select></td></tr></table></td></tr>
<input type="hidden" name="CopyAddresses" id="CopyAddresses" value="chris@webshoptools.com" />
<tr><td colspan="99" height="10"></td></tr>
<tr><td colspan=99 class='sale-header'>Credit Card Information</td></tr>
<tr><td class="sale-label-req" valign="top" nowrap="nowrap">Card Type <span class='sale-req'>*</span></td><td id="CreditCard0CardType_data" valign="top" align="left"><table cellpadding="0px" cellspacing="0px" border="0px"><tr><td><select class="inf-select sale-select-req"   id="CreditCard0CardType" name="CreditCard0CardType" ><option value="">Please select a card type <span class='sale-req'>*</span></option><option value="American Express">American Express</option>
<option value="Discover">Discover</option>
<option value="MasterCard">MasterCard</option>
<option value="Visa">Visa</option>
</select></td></tr></table></td></tr>
<tr><td class="sale-label-req" valign="top" nowrap="nowrap">Card Number <span class='sale-req'>*</span></td><td id="CreditCard0CardNumber_data" valign="top" align="left"><table cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<td><input size="35" class="sale-text-req" type="text" name="CreditCard0CardNumber" id="CreditCard0CardNumber" maxlength="16"  autocomplete="off" /></td>
</tr>
</table>
</td></tr>
<tr><td class="sale-label-req" valign="top" nowrap="nowrap">Expiration Month <span class='sale-req'>*</span></td><td id="CreditCard0ExpirationMonth_data" valign="top" align="left"><table cellpadding="0px" cellspacing="0px" border="0px"><tr><td><select class="inf-select sale-select-req"   id="CreditCard0ExpirationMonth" name="CreditCard0ExpirationMonth" ><option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select></td></tr></table></td></tr>
<tr><td class="sale-label-req" valign="top" nowrap="nowrap">Expiration Year <span class='sale-req'>*</span></td><td id="CreditCard0ExpirationYear_data" valign="top" align="left"><table cellpadding="0px" cellspacing="0px" border="0px"><tr><td><select class="inf-select sale-select-req"   id="CreditCard0ExpirationYear" name="CreditCard0ExpirationYear" ><option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select></td></tr></table></td></tr>
<tr><td class="sale-label-req" valign="top" nowrap="nowrap">Card Security Code <span class='sale-req'>*</span></td><td id="CreditCard0VerificationCode_data" valign="top" align="left"><table cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<td><input size="5" class="sale-select-req" type="text" name="CreditCard0VerificationCode" id="CreditCard0VerificationCode" /></td>
</tr>
</table>
</td></tr>
<tr><td colspan="99" height="10"></td></tr>
<tr><td colspan=99 class='sale-header'>Product Purchase Plan</td></tr>
<tr><td width="100%" colspan="99"><table width="100%" cellpadding="4" cellspacing="0" border="0"><tr><td width="75%" class='sale-productheader'><b>Nutrients from Diet 14 Day Trial</b></td><td width="25%" class='sale-productheader' valign='top'>Amt</td></tr>
<tr><td><table><tr><td><input type=radio class=radio name=PurchaseType value="A" checked onClick="calcTotals()"><input type="hidden" name="PayTotal_A" id="PayTotal_A" value="1.0" /><input type="hidden" name="PlanCount_A" id="PlanCount_A" value="1" /></td><td class='sale-productdata'>1 Payment of $1.00</td></tr></table></td><td class='sale-productdata'><B>$1.00</td></tr>
</table></td></tr>
<tr><td colspan="99" height="10"></td></tr>
<tr><td colspan=99 class='sale-header'>Subscription Purchase</td></tr>
<tr><td width="100%" colspan=99><table width="100%" cellpadding=4 cellspacing=0 border=0>
<tr><td width="75%" class='sale-productheader'><b>FBAnalysis - Practitioner Subscription</b></td>
<td width="25%"></td></tr>
<input type="hidden" name="CProgramWait" id="CProgramWait" value="30" /><tr><td><table><tr><td><input type="radio" class="radio" checked></td><td class='sale-productdata'>$149.00 every Month</td></tr></table></td><td class='sale-productdata'><B>$149.00 every Month</td></tr>
</table></td></tr>
<script type="text/javascript">
	function calcTotals() {
	}
</script>
<tr><td colspan="99" height="10"></td></tr>
<tr><td colspan=99 align="center" class='sale-header'>Process</td></tr>
<tr><td colspan="99" height="10"></td></tr>
<tr><td colspan=99 align='center'><input class="sale-orderbutton np inf-button" type="submit" name="Order" id="Order" value="Order" /></td></tr>
</table>
</form></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td width='100%'>
            <table width='100%'>
                <tr>
                    <td align='right'>
                        <div id="branding" style="text-align:right;display:block"><a href="https://crm.infusionsoft.com/go/infs/footer_drberg/sale" target="_blank"><img border="0" src="/slices/branding/powered_white.jpg"></a></div></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<script type="text/javascript" src="https://drberg.infusionsoft.com/js/sink_jq.jsp"></script>
<script type="text/javascript" src="https://drberg.infusionsoft.com/js/sink_js.jsp"></script>
 
<script type="text/javascript">
 
    var orderButton = document.getElementById('Order');
    if (orderButton != null) {
        orderButton.onclick = new Function("this.disabled=true;this.form.submit();");
    }
 
    if (window.calcTotals) {
        calcTotals();
    }
 
</script>

Open in new window

0
3rdLifeWebDev
Asked:
3rdLifeWebDev
  • 3
  • 2
  • 2
1 Solution
 
manavsiCommented:
hi just for your information, IE has the worst CSS rendering engine, people could think of...
As of IE is concerned, it ignores the class attribute of buttons...

So you could solve your Truncated version of your button, by wrapping your input -> submit inside an div tag which has the class as sale-orderbutton np inf-button

May be following snippet helps... :)

HTH
Manavsi
0
 
manavsiCommented:
the snippet is here... :)

May be if you want more advanced options chk this link
http://www.brownbatterystudios.com/sixthings/2006/05/12/an-even-better-ie-button-width-fix/

HTH
Manavsi

<!-- Your previous code for the OrderSubmit button -->
<input  type="submit" class="sale-orderbutton np inf-button" name="Order" id="Order" value="Order" />
 
<!-- Replace the above code with this one -->
<div class="sale-orderbutton np inf-button"><input  type="submit" name="Order" id="Order" value="Order" /></div>
<!-- End Replace here.. :) -->

Open in new window

0
 
3rdLifeWebDevAuthor Commented:
Unfortunately, as posted in my original staement, I cannot edit that area. I can only edit the top portion, as represented above the *******************************
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
manavsiCommented:
Hey dude, i'm really sorry about then... i'm not able another viable solution to this problem..

You need to wrap it inside a <span> ot <div> and change the width of those to adjust in their CSS properties.. thats CSS rendering in IE...

Manavsi
0
 
ddayx10Commented:
I dont mean to to be contradicotry here, but you can style an input in IE adjusting the width without any problems at all. This is not a browser issue. The code you gave has lots of little quirks:

1) VS tells me the tags arent all closed, but since they are nested tables that may or may not be true. This shows for me on your line 34 <table align="center"><tr><td><table><tr><td>

2)Much of the CSS definition appears to be missing, so I really dont know what else may be affecting things.

3) The css in place for the input in question is not even hitting the target in either FF or IE:
.sale-orderbutton np inf-button
{
width: 200px;
text-align: center;
}

<input class="sale-orderbutton np inf-button" type="submit" name="Order" id="Order" value="Order" />

If you change the width, or add a color for example it doesn't change in FF or IE. I cant find any CSS for classes "np" or "inf-button" so I don't know what those are doing.

4) Most telling of ALL is that this looks like it is being hijacked by JavaScript and that is the real issue. If you remove the following lines the CSS works on the input as is:

<script type="text/javascript" src="https://drberg.infusionsoft.com/js/sink_jq.jsp"></script>
<script type="text/javascript" src="https://drberg.infusionsoft.com/js/sink_js.jsp"></script>

I suspect there is a browser specific property being assigned for one browser that is not compatible with both (in short some bad JS).

You can see that the width property is being manipulated if you add some CSS and deduce:
#Order{width:300px; font-weight:bold;}

Now what you'll see here is that the font-weight will change but the width does not? Seems to indicate only some CSS styles are being affected.

In conclusion, since you are limited in what you are allowed to do, you can trick the situation into your control by manipulating a property that is under your  control such as padding:
#Order{padding-right:20px; padding-left:20px;}

You might have to tweak it around a little bit, and it likely wont be perfect, but you can get close. Or maybe you can manipulate another property to get you where you want to go.

dday
0
 
3rdLifeWebDevAuthor Commented:
You get the credit! Your answer solved the problem.

Thank you very much!
0
 
ddayx10Commented:
You're Welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now