Solved

Submit Button not displaying properly in IE

Posted on 2009-05-14
7
1,058 Views
Last Modified: 2013-12-08
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
Comment
Question by:3rdLifeWebDev
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 4

Expert Comment

by:manavsi
ID: 24392061
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
 
LVL 4

Expert Comment

by:manavsi
ID: 24392077
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
 

Author Comment

by:3rdLifeWebDev
ID: 24392259
Unfortunately, as posted in my original staement, I cannot edit that area. I can only edit the top portion, as represented above the *******************************
0
Create Professional Looking Email Signatures

Create "Professional HTML Email Signatures" with ease.
7 Day Money Back Guarantee if not 100% Satisfied.
Affordable - Try it out for 7 Days Totally Risk Free.
Installers provided for over 45 Email clients.
Both Windows & MAC Supported.
Highly Recommended!

 
LVL 4

Expert Comment

by:manavsi
ID: 24392344
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
 
LVL 20

Accepted Solution

by:
ddayx10 earned 500 total points
ID: 24392475
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
 

Author Closing Comment

by:3rdLifeWebDev
ID: 31581780
You get the credit! Your answer solved the problem.

Thank you very much!
0
 
LVL 20

Expert Comment

by:ddayx10
ID: 24392634
You're Welcome.
0

Featured Post

Windows running painfully slow? Try these tips..

Stay away from Speed Up Computer Programs that do more harm than good.
Try these tips instead.
Step by step instructions in trouble shooting Windows Performance issues.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I spend far too much time on the web keeping up with the news: politics, the environment, computer stuff, the Experts Exchange. It's never-ending. But many of the most informative web pages are overwhelmed with noise: scrolling banners, flashing tex…
After uninstalling Opera browser (for example ver. 10.63), your attempts to open a web page by clicking on a URL link may fail with an error message.  The error is "This operation has been canceled due to restrictions in effect on this computer. Ple…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question