Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Submit Button not displaying properly in IE

Posted on 2009-05-14
7
Medium Priority
?
1,067 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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
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 2000 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
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.
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…
Suggested Courses

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