IntroductionI 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" >
<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>And in IE it’s coming as, Resolution, I have defined the following style <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 Viola!!!!! issue resolved. Hope this helps. |