Jump to content

Recommended Posts

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

Link to comment
https://forums.phpfreaks.com/topic/176310-ie8-textarea-style-not-updating/
Share on other sites

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

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.

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.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.