Issues with text input and css

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • makunta
    New Member
    • Sep 2008
    • 7
    #1

    Issues with text input and css

    I have coded a web form and styled it with css. It can be seen here:

    http://www.exmhosting. com/

    The form is the small login one situated top right of the webpage. I have styled the text input with this code:

    Code:
    .shortLogin {
  font-family:sans-serif;
  font-size:10pt;
  text-align:left;
  border:none;
  color:black;
  vertical-align:middle;
  height:19px;
  background:url(/images/btn_1.jpg) no-repeat left;
}
    The problem is in IE7, if the text input by the user is a long string then the background image scrolls to the left, this does not happen in FF3.

    Anyone have any ideas how I can stop this strange behaviour in IE7?
    Tags: None
    • David Laakso
      Recognized Expert Contributor
      • Aug 2008
      • 397
      #2
      There are 77 markup validation errors. The document is HTML Proprietary not XHTML 1.0 Transitional.

      Change the doctype to:
      Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
      This will not "fix" anything. It will simply provide a more lenient means to "mask" garbage. Validate to that doctype and the validation errors will be significantly reduced. Correct the remaining errors.

      Whether IE/7 will be able to recover from error after this is done remains to be seen.

        Comment

        • makunta
          New Member
          • Sep 2008
          • 7
          #3
          I thank you for your advice but fail to see what this has to do with my original post. If changing the doc type fixed my problem then I could understand but it does not.

          I have not been hired to fix any validation errors but to put a form into the page and style it with css.

          One suggestion I have had was to add 'fixed' to the background property. When I do this the image disappears completely. I have set the width and height in the css to reflect the size of the image at 19x93.

          Any other suggestions are more than welcome but please keep them relevant to the actual post.

            Comment

            Previous template Next
            Working...