Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I have the following HTML and css

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#test
{
   font-family:helvetica;
   color:#000;
   font-size:10px;
}
</style>
</head>
<body>
<input type="password" id="test" name="pass" size="30" max="100">
</body>
</html>

When I open it up in Firefox and enter some chars as expected bullets are displayed, however if I open it in IE 7 or 8 ugly little squares show up. If I comment out the font-family line in the style definition then both IE and Firefox properly display the bullets. My question is not how can I work around this, (I know i can just use a diff font-family or just not specify one) but what is causing IE to not properly display the bullets when the font-family is set to Helvitica?

share|improve this question
add comment

4 Answers

Your version of Helvetica either doesn't have the bullet character and is defaulting to the funny rectangle, or it just has a bad idea of what a bullet point should look like. You'll see it a lot with "freeware" fonts, but I wouldn't imagine Helvetica to skip characters unless it's a knock-off version.

If you're on Windows, run charmap (start->run->type "charmap") and compare MS' Arial to your Helvetica, since it has the full character set. I think it's either U+25CF (●) or U+2022 (•), way down in the Unicode set past all the umlauts and squiggles.

The only practical way around that is to use a different font.

share|improve this answer
add comment

Either that or take out the font-family. Adding a font-family attribute to an input area with the type of password seems pretty counter-productive unless you have some JavaScript to have some text inside of the box before you start typing in it.

Assuming that's the case, I would use a different font that is a standard Windows font that comes with every operating system. Those are pretty universal throughout Linux and Mac. If a user with an outdated version of Windows or Linux tries to view your webpage, it is going to look really messy anyway.

share|improve this answer
add comment

Unable to duplicate in IE 8.0.6001.18702 build 86001.

Check your character encoding settings in IE (I'd recommend starting with auto select), check the character encoding of the file, and (if applicable) whether your server is sending the correct content-type headers.

share|improve this answer
add comment

Because IE sucks.

Just kidding (although I kid you not!). Have you installed any custom Windows theme? And what version of Windows are you using?

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.