I currently have a basic "username" text box available for users to input their information. You can view this text box by following this link:
When using Chrome, the text box displays as intended with the watermark properly positioned and the user-inputted text appearing correctly. However, when accessed in Internet Explorer (IE), the user-inputted text appears fine but the watermark is not positioned correctly. It seems to be slightly off-center vertically, appearing 2 or 3 pixels lower than desired. I am utilizing the JQuery Watermark plugin from this source: http://code.google.com/p/jquery-watermark/. Here's a snippet of my code:
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="/resources/scripts/jquery.watermark.min.js"></script>
</head>
<body>
<div style="background-color:#E6E7E8; padding:40px;">
<div>Username</div>
<div><input id="usernameField" type="text"
style="background-position:183px 332px; background-image:url(/images.png); height:15px; width:146px; border:0px none; padding:5px 10px 0px 10px; color:#A6A8AB; font-size:10pt; font-family:Verdana;" /></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#usernameField").watermark("USERNAME");
});
</script>
</body>
Is there a solution available to address this issue effectively? Any assistance would be greatly appreciated. Thank you!