Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Passwords showing up as white (or not at all) in IE

For some reason password fields are appearing as blank (or white) characters in IE8 for a site I'm working on.

Both these screenshots have a long password entered. The second one I have highlighted it so you can see it recognizes the characters, they just appear as empty. I also included the IE debug trace.

Full size - http://i.stack.imgur.com/hUd4I.png

Unhighlighted

Full size - http://i.stack.imgur.com/tOkn9.png

Password highlighted

In other browsers they show up fine. I have never seen anything like this before, any ideas?

HTML header:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

Only custom CSS for inputs:

body, input, button, select, textarea {
    font-family: 'Open Sans' , sans-serif;
    font-size: 13px;
}
like image 755
Terry Avatar asked Aug 30 '12 14:08

Terry


2 Answers

I had the same issue. I fixed it by adding a hack in my CSS to override the input font from Open Sans to Arial:

.form-horizontal input {
    *background-color: #ffffff !important;
    *color: #464646 !important;
    *font-family: Arial !important;
}

It has to be a character issue with Google Font and IE where the password dots are missing from the font or something like that.

like image 168
Mike Avatar answered Jan 07 '23 11:01

Mike


This is how I solved it

<?php echo Form::password('password', NULL, array('title'=>'', 'class' => 'input-block-level', 'tabindex' => '2', 'placeholder'=>'Password', 'title' => 'Password', 'style' => 'font-family:arial, serif;')) ?><!-- the font family arial serif is a fix for IE8 password placeholder text -->
like image 44
Julian Avatar answered Jan 07 '23 10:01

Julian