Solved

Submit Button not displaying properly in IE

Posted on 2009-05-14
7
1,035 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
  • 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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

I recently found myself in a Corporate Situation where the client had requested blocking access to any and all websites except his own Domain? Easy? I am sure this would be your answer but their requirement was, this has to be done without using…
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

705 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now