Connecting Tech Pros Worldwide Forums | Help | Site Map

Issues with text input and css

Newbie
 
Join Date: Sep 2008
Posts: 7
#1: Oct 2 '08
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:

Expand|Select|Wrap|Line Numbers
  1. .shortLogin {
  2.   font-family:sans-serif;
  3.   font-size:10pt;
  4.   text-align:left;
  5.   border:none;
  6.   color:black;
  7.   vertical-align:middle;
  8.   height:19px;
  9.   background:url(/images/btn_1.jpg) no-repeat left;
  10. }
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?

Expert
 
Join Date: Aug 2008
Posts: 397
#2: Oct 2 '08

re: Issues with text input and css


There are 77 markup validation errors. The document is HTML Proprietary not XHTML 1.0 Transitional.

Change the doctype to:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "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.
Newbie
 
Join Date: Sep 2008
Posts: 7
#3: Oct 3 '08

re: Issues with text input and css


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.
Reply