Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1

    Exclamation IE6 ,utf-8 charset elongates one of my input control !

    Hi all,

    After a long trial, I got the cause of my problem. Now please suggest some solution to this strange problem. ( in IE6 only)

    I have a login form, having two controls(as usual username& password).

    I haven't given any attribute to any of them, but the username field elongates a little than the other.

    I'm using 'utf-8' in meta as charset, however when I change it to 'iso-8859-1' , it looks fine.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Login Page</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <!--meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"-->
    <style type="text/css">
    div.row {
      clear: both;
      padding-top: 10px;
      }
    div.row span.label {
      float: left;
      width: 200px;
      text-align: right;
      margin-right:10px;
      }
    div.row span.formw {
      width: 235px;
      text-align: left;
      }   
    </style>
    </head>
    <body >
    <div id="wrap">
    		 <div id="main_content">
    			 <form id="fm_login" action="#" method="post">
    				<div >
    					<div class="row">
    					  <span class="label">Username:</span>
    					  <span class="formw"><input name="username" id="username" value=""  tabindex="1" type="text"/></span>
    					</div>
    					<div class="row">
    					  <span class="label">Password:</span>
    					  <span class="formw"><input name="userpassword" id="userpassword" tabindex="2" type="password"/></span>
    					</div>
    					<div class="row" style="padding-left: 215px;">
    					<span><input value="Sign In"  onclick="validate_login();" tabindex="3" type="button"/></span>
    					</div>
    				</div>
    				</form>
    	 </div>		
    </div>
     </body>
     </html>
    Anything wrong with my code? (Nothing wrong in IE7,Opera,FF)

    Thanks and regards,
    art
    Last edited by abduraooft; 07-17-2007 at 03:12 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by abduraooft View Post
    I haven't given any attribute to any of them, but the username field elongates a little than the other.

    I'm using 'utf-8' in meta as charset, however when I change it to 'iso-8859-1' , it looks fine.
    I tried your example in IE6 on Windows XP and I do see the issue which surprised me.

    When an explicit width for the text input field is not set via the CSS width property then the final width will depend on the font-family set for the element.

    Apparently IE6 is setting a different font-family for the text input when you specify the UTF-8 character set. Here is what I found by alerting the string document.getElementById(el).currentStyle['fontFamily'] for each of the input elements in each of the two encodings.

    UTF-8 browser styles with IE6
    Code:
    input[type='text'] {
    	font-family: Arial;
    }
    input[type='password'] {
    	font-family: Tahoma;
    }
    ISO-8859-1 browser styles with IE6
    Code:
    input[type='text'] {
    	font-family: 'MS Shell Dlg';
    }
    input[type='password'] {
    	font-family: Tahoma;
    }
    Note that IE6 does not support selection by attribute value. This is just for illustration purpose.

    At least this gives an understanding of what is going on. Why IE6 chooses a different font I don't know, but there is probably a good explanation?

    For some reason I don't find any sources about subjects like these?

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Ahh... that's great koyama,

    I had played on the size attribute, but it made problems in FF (initially it was fine!) and then I removed.

    I never thought about font-family, since I had used these two controls together at a different occasion.(But It was a table layout and probably that’s why I couldn't notice such a problem )

    Now IE6 is happy (me too.. ), since my page has as CSS like
    Code:
    input{
     font-family:Verdana;
     }


    thanks,
    art
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •