Mon, 2012-01-09 10:40
Hi there, I have a problem in IE7 where my text box just seems to scroll when you fill it with text:
Here is my HTML:
<div id="divNewsletter" class="leftNav" style="z-index: 670;"> <span id="ctl00_NewsletterControl1"> <div id="ptkSubscribe" style="z-index: 660;"> <div class="emailAddress" style="z-index: 650;">Email Address</div><table width="50px" style="width:50px" class="NewsletterBox"> <tbody><tr> <td colspan="2"></td> </tr> <input type="hidden" value="" id="txt_NL_FirstName"> <input type="hidden" value="" id="txt_NL_LastName"> <tr> <td> <input type="text" size="13" onkeypress="enterSubmit(event);" id="txtEmailAddress"><br> <input type="hidden" value="" id="txtCaptcha"><br></td> </tr> <tr> <td align="left" colspan="2"><input type="button" onclick="clickSubmit();" id="cmdSubmit" value="Submit"></td> </tr> </tbody></table> </div> <script> function clickSubmit() { var xReq = new SOAPRequest('Newsletter.Subscribe.asmx', 'Subscribe', 'http://aspdotnetstorefront.com') xReq.addParameter('emailAddress', document.getElementById('txtEmailAddress').value); xReq.addParameter('Captcha', document.getElementById('txtCaptcha').value); xReq.Execute(buildBox); } function buildBox(submitResponse) { document.getElementById('ptkSubscribe').innerHTML = submitResponse; } </script> <script>// ------------------------------------------------------------------------------------------ // Copyright AspDotNetStorefront.com, 1995-2011. All Rights Reserved. // <a href="http://www.aspdotnetstorefront.com" rel="nofollow">http://www.aspdotnetstorefront.com</a> // For details on this license please visit the product homepage at the URL above. // THE ABOVE NOTICE MUST REMAIN INTACT. // ------------------------------------------------------------------------------------------ ///<reference name="MicrosoftAjax.js"/> Type.registerNamespace("AspDotNetStorefrontControls"); AspDotNetStorefrontControls.NewsletterControl = function(element) { AspDotNetStorefrontControls.NewsletterControl.initializeBase(this, [element]); } AspDotNetStorefrontControls.NewsletterControl.prototype = { initialize: function() { AspDotNetStorefrontControls.NewsletterControl.callBaseMethod(this, 'initialize'); // Add custom initialization here }, dispose: function() { //Add custom dispose actions here AspDotNetStorefrontControls.NewsletterControl.callBaseMethod(this, 'dispose'); } } function enterSubmit(e) { var key; if(window.event) { key = e.keyCode; } else if(e.which) { key = e.which; } if (key == 13) { clickSubmit(); } } function clickSubmit() { var firstName = $get('txt_NL_FirstName').value; var lastName = $get('txt_NL_LastName').value; var address = $get('txtEmailAddress').value; var captcha = $get('txtCaptcha').value; AspDotNetStorefrontControls.NewsletterControlService.Subscribe(firstName, lastName, address, captcha, callback); } function callback(res) { if (res == "CAPTCHA_ERROR") { AspDotNetStorefrontControls.NewsletterControlService.getCapthaErrorBlock(callback); AspDotNetStorefrontControls.NewsletterControlService.ErrorStallback(callback); } else if (res == "ADDRESS_ERROR") { AspDotNetStorefrontControls.NewsletterControlService.getAddressErrorBlock(callback); AspDotNetStorefrontControls.NewsletterControlService.ErrorStallback(callback); } else { $get("ptkSubscribe").innerHTML = res; } } AspDotNetStorefrontControls.NewsletterControl.registerClass('AspDotNetStorefrontControls.NewsletterControl', Sys.UI.Control); if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded(); </script></span> <div id="signUpText" style="z-index: 640;">Sign up to our newsletter</div> </div>
Here is my CSS:
/*hide the newsletter default email address*/ .emailAddress { display:none; } #divNewsletter { background-image: url("http://i43.tinypic.com/xokqyr.jpg"); background-repeat: no-repeat; height: 230px; position: relative; top: 20px; width: 230px; } #txtEmailAddress { background-color: transparent; background-image: url("http://i40.tinypic.com/t89g9d.png"); border: 0 none; font-size: 12px; height: 30px; left: 16px; padding-left: 5px; position: absolute; top: 91px; width: 196px; background-repeat:no-repeat; border: 0; } #ptkSubscribe { color: black; } #ptkSubscribe #cmdSubmit { background-color: transparent; background-image: url("http://i41.tinypic.com/4h7brk.jpg"); border: medium none; color: transparent; cursor: pointer; font-size: 0pt; height: 29px; left: 59px; line-height: 0; position: absolute; text-transform: capitalize; top: 132px; width: 100px; } div#ptkSubscribe{ width: 261px; color: #302721; } div#ptkSubscribe input { border: 0; padding: 3px; height: 22px; width: 160px; background-color: transparent; border: 0 none; font-size: 12px; height: 30px; left: 16px; padding-left: 5px; position: absolute; top: 91px; width: 196px; background-repeat:no-repeat; border: 0; } #signUpText { color: #8B8B8B; font-size: 13pt; left: 64px; position: absolute; text-align: center; top: 39px; width: 101px; }
Might make it easier if you can have a look at my jsiddle, ive removed all the other code so its just the newsletter stuff.
Ill assume you have IE8/9, so if you run it in "Document mode: IE7 Standards" i get the problem.
Ive tried this:
but seem to get an on hover blinking when ever i try to implement it.
Wondering if you can help me out?
Cheers
Mon, 2012-01-09 10:42
#1
here is my jsfiddle:
here is my jsfiddle:
htt_p://jsfiddle.net/pxM3D/
remove the underscore, (not sure why i cant add links?)
Fri, 2012-01-13 06:57
#2
Plumbing services
I really enjoyed the post but was wondering if you had any advice for those who have some nice bunch of ideas. Thanks!
[spam is not nice, therefore cut. ~gt]