www.webdeveloper.com
Results 1 to 5 of 5

Thread: textarea background-repeat IE7

  1. #1
    Join Date
    Feb 2006
    Posts
    156

    textarea background-repeat IE7

    http://www.themenubag.com/2008/contacts.php

    On the form fields, i've got the following css:

    HTML Code:
    textarea.message {
     background-color: #dcc9a7;
     border:0px #dcc9a7 solid;
     color: #78582f;
     background-image: url(images/form_bb2.gif);
     background-repeat: no-repeat;
     font-family:Arial, Helvetica, sans-serif;
     font-size: 12px;
     width:204px;
     height:91px;
     padding:5px;
    }
    input.contact {
     background-color: #dcc9a7;
     border:0px #dcc9a7 solid;
     color: #78582f;
     font-size: 12px;
     background-image: url(images/form_bb.gif);
     background-repeat: no-repeat;
     width:204px;
     height:25px;
     padding:5px;
     vertical-align:middle;
    }
    In IE7, when you type to much in the input fields...the background image repeats to the left and right, so it appears to 'scroll' as you type. In the textarea..typing to much, or pressing multiple enters causes it to scroll down as it would seem...but with no-repeat on the background image just disappears, with it off, it of course repeats.

    Is there any kind of IE hack for this?

    Oh also, in IE7, adding no-repeat to the end of the background-image tag (instead of putting it in its own tag) caused the background images to disappear all together.


    Thank you!

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Quote Originally Posted by SaveSheep
    Is there any kind of IE hack for this?
    The attribute: maxlength="45"

    Quote Originally Posted by SaveSheep
    Oh also, in IE7, adding no-repeat to the end of the background-image tag (instead of putting it in its own tag) caused the background images to disappear all together.
    You haven't done this on the site.
    Wrong
    Code:
    background-images: url(images/form_bb.gif) no-repeat;
    Correct
    Code:
    background:#rgb(255, 255, 160) url(images/form_bb.gif) no-repeat;

  3. #3
    Join Date
    Feb 2006
    Posts
    156
    Unfortunately, using the technique you mentioned above made IE stop showing the background image all together.

    Now i've figured out another way to do it so that it works right and that would be with the following
    HTML Code:
    textarea.message {
     background-color: #dcc9a7;
     border:0px #dcc9a7 solid;
     color: #78582f;
     background:url(images/form_bb2.gif);
     background-attachment:fixed;
     background-position:-30px -21px;
     font-family:Arial, Helvetica, sans-serif;
     font-size: 12px;
     width:204px;
     height:91px;
     padding:5px;
    }
    However, that makes it look right in firefox, background-position: -36px -21px makes it look right in IE. How can i tell IE to use this position, and everybody else to use the other one?

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654

  5. #5
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Attachment and repeat are completely distinct stylistic attributes. Are the Microsoft hacks so bad that they think fixed attachment is the same as no repeat?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles