gevans Posted October 2, 2009 Share Posted October 2, 2009 Hey guys, I've been playing with this for a while now, and after trying a lot of things I decided to put it in the JavaScript forum. The problem is with the contact form on the following page (while using IE8); http://projects.purplecoffee.co.uk/v3/services#contact You should automatically get taken to the bottom of the page and see the form. The form displays fine in FF3, FF2, Safari, Chrome and IE7 (don't bother looking at IE6). The problem is with the text in the textarea. If javascript is disabled the default style has smaller text giving the user more room to type (there's no problem with this). With javascript enabled, on page load the text in the textarea is increased to match the size of the input fields (this is made smaller when the textarea is active). When the text is increased the top padding in the textarea seems to resort to the default for no aparent reason. If you click in, and then out of the textarea, the text moves to the correct position. The code regarding the textarea is bellow; HTML (ignore the mixed php) <textarea name="enquiry" cols="39" rows="4" class="<?=isset($class)? $class : ''?>Whats Up?</textarea> CSS #contact textarea { display: block; width: 324px; border: 1px solid #c3c3c3; background-color: #c3c3c3; height: 87px; color: #f8f8f8; font-size: 1.2em; padding: 8px 11px 8px !important; } #contact textarea.js { font-size: 2.2em; } JQuery $(document).ready(function() { $('#contact textarea').each(function() { $(this).addClass('js'); }); }); Hope you guys have more of a clue than I do today, Cheers, Gareth Quote Link to comment Share on other sites More sharing options...
gevans Posted October 5, 2009 Author Share Posted October 5, 2009 Anyone got any ideas? I'm still looking at it ocassionally. Have no idea why it's doing it though. I've noticed it happening in some versions of IE7 as well. Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted October 5, 2009 Share Posted October 5, 2009 It looks like the following for me in FF 3.5 and IE8: Firefox - http://www.nightslyr.com/Firefox%20textarea.jpg IE8 - http://www.nightslyr.com/IE8%20textarea.jpg The test code: <html> <head> <title>Blah</title> <script type="text/javascript" src="js/jquery-1.3.2.min.js"> <script type="text/javascript"> $(document).ready(function(){ $('#contact textarea).each(function(){ $(this).addClass('js'); }); }); </script> <style> #contact textarea { display: block; width: 324px; border: 1px solid #c3c3c3; background-color: #c3c3c3; height: 87px; color: #f8f8f8; font-size: 1.2em; padding: 8px 11px 8px !important; } #contact textarea.js { font-size: 2.2em; } </style> </head> <body> <div id="contact"> <textarea name="enquiry" cols="39" rows="4">Whats Up?</textarea> </div> </body> </html> I didn't notice any text jumping around. I did see that your textarea was missing a closing '>' on the opening tag, however. EDIT: removed H-scroll Quote Link to comment Share on other sites More sharing options...
gevans Posted October 6, 2009 Author Share Posted October 6, 2009 Strange, I see the closing tag on all pages that use the form (and it's in my code). I'm using XP, this shouldn't make any difference. But the only systems I've tested on are XP. Another page seems to be displaying everything fine, there must be some issue on hte pages somewhere... I'll keep the thread updated. Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted October 6, 2009 Share Posted October 6, 2009 Well, it's not a closing tag that I had to fix, but no end to the opening tag... <textarea name="enquiry" cols="39" rows="4" class="<?=isset($class)? $class : ''?> /* <-- right here */ Whats Up?</textarea> Quote Link to comment Share on other sites More sharing options...
gevans Posted October 7, 2009 Author Share Posted October 7, 2009 Sorry, that was me taking out a little php; <textarea name="enquiry" cols="39" rows="4" class="<?=isset($class)? 'js'.$class : 'js'?>"><?=isset($enquiry)? $enquiry : 'Whats Up?'?></textarea> That's the actual markup, so it's fine on the actual site. I've resorted to taking out the JavaScript and hard coded the class in, I'll have to have a look another day when time is on my side. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.