I came across a strange issue with Password input and IE browser. I have set the width property as same as that of the other controls. But while rendering it in IE, the width of Password field was coming as around 10 pixel less than the other control. The best way to get rid of this issue was using CSS.
Before applying CSS I was using the below code
<html xmlns="http://www.w3.org/1999/xhtml" >And in IE it’s coming as
<body>
<form id="form1" runat="server">
<table width="25%">
<tr>
<td style="width:100%; text-align:left">UserName: </td>
<td style="width:100%; text-align:left"><asp:TextBox ID="txtUserName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td style="width:100%; text-align:left">Password: </td>
<td style="width:100%; text-align:left"><asp:TextBox ID="txtPassword" TextMode="Password" runat="server"></asp:TextBox></td>
</tr>
</table>
</form>
</body>
</html>
<style type="text/css" >
.TextBox
{
font-family: Arial, Tahoma, Verdana, Calibri;
font-size: 12px;
color: Black;
height: auto;
width: auto;
}
</style>
And modified the HTML as
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<form id="form1" runat="server">
<table width="25%">
<tr>
<td style="width:100%; text-align:left">UserName: </td>
<td style="width:100%; text-align:left"><asp:TextBox CssClass="TextBox" ID="txtUserName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td style="width:100%; text-align:left">Password: </td>
<td style="width:100%; text-align:left"><asp:TextBox CssClass="TextBox" ID="txtPassword" TextMode="Password" runat="server"></asp:TextBox></td>
</tr>
</table>
</form>
</body>
</html>
Now in IE it’s coming as
1 comment:
Thanks Amal, this helped.
Post a Comment