{"id":163,"date":"2012-08-30T20:26:01","date_gmt":"2012-08-30T19:26:01","guid":{"rendered":"http:\/\/www.psinke.nl\/wordpress\/?p=163"},"modified":"2013-10-28T17:28:43","modified_gmt":"2013-10-28T16:28:43","slug":"fixing-column-width-of-password-field-in-internet-explorer","status":"publish","type":"post","link":"https:\/\/www.psinke.nl\/blog\/fixing-column-width-of-password-field-in-internet-explorer\/","title":{"rendered":"fixing column width of password field in Internet Explorer"},"content":{"rendered":"<div class=\"afa2b3b851443650502c43e85c746c1f\" data-index=\"1\" style=\"float: none; margin:0px;\">\n<script type=\"text\/javascript\"><!--\r\ngoogle_ad_client = \"ca-pub-4223201538046844\";\r\n\/* standaardblok *\/\r\ngoogle_ad_slot = \"9522527129\";\r\ngoogle_ad_width = 320;\r\ngoogle_ad_height = 50;\r\n\/\/-->\r\n<\/script>\r\n<script type=\"text\/javascript\"\r\nsrc=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\r\n<\/script>\n<\/div>\n<p>In Internet Explorer, the password field is a bit smaller than a regular textfield, causing them not to line up neatly. A very annoying little bug that messes up your page layout.<\/p>\n<p>Firefox, Chrome and Safari behave nicely here.<\/p>\n<p>The problem is caused by the font type Internet Explorer uses for it&#8217;s password field. This is often different than the other fields. I found a simple trick to make them equal size: set the same font on all the fields with CSS.<\/p>\n<p>The easy way is to put the following code in your HTML page header:<\/p>\n<pre><code>&lt;style type=\"text\/css\"&gt;\r\n\u00a0 input\u00a0\r\n<\/code>  { font-family: sans-serif; }\r\n&lt;\/style&gt;<\/pre>\n<p>Now, all input items \u00a0on the page have the same font, making sure that Internet Explorer renders them with equal length.<\/p>\n<p>In case you&#8217;re wondering where the name\u00a0<em>sans-serif<\/em> comes from, check out an <a title=\"interesting explanation here.\" href=\"http:\/\/www.codestyle.org\/css\/font-family\/Glossary.shtml#sans-serif\" target=\"_blank\">interesting explanation here<\/a>\u00a0of the classification of fonts.<\/p>\n<!--CusAds0-->\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>In Internet Explorer, the password field is a bit smaller than a regular textfield, causing them not to line up neatly. A very annoying little bug that messes up your page layout. Firefox, Chrome and Safari behave nicely here. The problem is caused by the font type Internet Explorer uses for it&#8217;s password field. This&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[141,20,121],"tags":[149,155,157,156,137,152,154,153,43,150,151],"class_list":["post-163","post","type-post","status-publish","format-standard","hentry","category-apexapplication-express","category-web-and-beyond","category-tips-and-tricks","tag-css","tag-font","tag-font-family","tag-fonts","tag-html","tag-input-field","tag-input-item","tag-password-field","tag-ui","tag-uid","tag-webpages"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/posts\/163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/comments?post=163"}],"version-history":[{"count":0,"href":"https:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/posts\/163\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/media?parent=163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/categories?post=163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/tags?post=163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}