I have an application that has an initial login page that
has a user name and password input box.
This page works fine in IE 7, Safari , Firefox 4 & 5 but not
in IE 8 and 9. In IE 8/9 the user name and password display with
different size input boxes when you adjust the zoom percent.
While doing some testing I noticed in IE 8/9 the Document Mode is in Quirks Mode.
So I tried setting the Document Mode in IE 9 to IE 9 Standards mode and
the page displays correctly. However in IE 8 it has no affect.
The only thing I have been able to get to work is to redefine
the font-family in the style sheet for the input boxes. This works
for IE 7,8 and 9 and also Safari and Firefox.
I have also tried setting the DOCTYPE and meta tags but none of those
combinations seem to work in IE 8.
I included a test stylesheet and html below that reproduces
the problem.
Does anyone know why IE 8/9 would require this ? Is there another
way to handle this other than redefining the font-family ?
Thank you.
The stylesheet below works in IE 7, Safari and Firefox 4 & 5. In IE 8/9 it causes
the user name and password to display with different lengths unless I use the commented
out line:
stylesheet:
body { font-size: x-small; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;}
form { font-size: 100%; }
input { font-size: 110%; }
/*input { font-size: 110%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; }*/
INPUT.TEXT { font-size: 100%; }
select { font-size: 110%; }
textarea { font-size: 110%; }
html:
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
<body>
<table>
<tr><td>User Name: </td><td><input type=text name=username size=20 value=""></td></tr>
<tr><td>Password: </td><td><input type=password name=pass size=20></td></tr>
<tr><td> </td><td><input type=submit value=Login></td></tr>
</table>
</body>
</html>
Your input length is based on your font-size. But many form element do not inherit your font-family.
Test it with a funky font (Comic Sans MS) and a big font-size.
Related (except the first answer is wrong, input type do not inherit font-family).
You could set your input size in CSS (width:200px).
Little note : INPUT.TEXT points to no element. .text is a class.
Related
I'm using the font Cardiff in a project and trying to apply the style text-decoration:underline to it.
This works fine in Chrome (Version 35.0.1916.114) but Firefox (Version. 29.0.1) the underline is crossing through the text instead of appearing under it. I believe it's something to do with the Cardiff font because when I try a 'Web Safe' font the underline is displayed correctly.
This is how the Cardiff font is being displayed
If I then change the font to Helvetica, this is how it's displayed
I've tried a few things already:
Wrapping the font in a span tag, then styling this as a block and giving it a height
I've also tried a solution provided in another question
Updated...
Using fixes provided by #touko I've put together a solution that isn't really what I wanted to settle for but it works.
I've used a border for Firefox and regular text-decoration for other browsers.
h2 {
text-decoration: underline;
}
Firefox specific CSS styling as explained on this solution...
#-moz-document url-prefix() {
h2 {
text-decoration: none;
display: inline;
border-bottom: 1px solid #4c2f04;
padding-bottom: 6px;
}
}
I hope someone finds a better solution than this though because it's more of a bodge job if anything.
Seems like an issue with the font, you could try running it through the Font Squirrel Web Font Generator to see if that fixes it.
Just dont use vertical-align: middle
The similar problem is here: Link underline appearing above text in Firefox?
But looks like your problem is with a font itself.
I do not recommend to do a hack like border under the text. Search for other font.
body {
font-family: Cardiff;
font-size: 24px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="//db.onlinewebfonts.com/c/5762715ddcc2993805a83fcd2f569ea8?family=Cardiff" rel="stylesheet" type="text/css"/>
</head>
<body>
Demo text
</body>
</html>
You could use border-bottom as underline and set the space below to desirable with padding.
yourtxt-wrap{text-decoration:overline}
yourtxt-wrap{text-decoration:line-through}
yourtxt-wrap{text-decoration:underline}
I understood that the default font-size was 16px on browsers. Then why is the height of the inline-block(12px) same as the font-size (I've tried in Chrome and FF) ? Please help me understand. Thank you.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font: 100% helvetica, arial, sans-serif;
line-height: 1.625;
}
#tempTest {
display: inline-block;
width: 10px;
height: 12px;
background-color: orange;
}
</style>
</head>
<body>
<p class="heading"><span id="tempTest"></span>Remember, when you were young, you shone like a sun. Shine on you crazy diamond</p>
</body>
</html>
If you inspect the inline box using a browser’s Developer Tools (hit F12 to open them), you can see that its height is indeed 12px, as set in your code. This happens because there is nothing in it that would require more height; in general, the exact calculation of heights of inline blocks is browser-dependent.
The font size of the text is still the browser default, typically 16px. The font size does not mean the height of any particular letter. It is just a fundamental property of the font; typographers usually design characters so that they - together with ascenders, descenders, and diacritic marks - fit into the limits set by the font size (or extend over them just a little), and normally most letters have smaller height.
I have a quite unusual problem with the rendering of a textarea-field in Firefox. I haven't tested other versions than 18.0 on a Mac until now.
My problem is, that the font-size always is relative to 13px (the os-default) and not to 16px what it's parent has.
If I define a fixed font-size for it's parent, it works as expected. But if all parents have a relative font-size the textarea's font-size is just relative to my OS-default.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Firefox ..</title>
<style>
/* Fixed sizes */
/* body { font-size: 12pt; } */
/* body { font-size: 16px; } */
/* body { font-size: 0.4234cm; } */
/* Dynamic sizes */
/* body { font-size: 1em; } */
/* body { font-size: 100%; } */
/* body { font-size: medium; } */
textarea { font-size: 1em; }
</style>
</head>
<body>
<textarea rows="4" cols="20">abc</textarea>
</body>
</html>
Similar question, but does not cover my case: Why <textarea> and <textfield> not taking font-family and font-size from body?
Anyone experienced something similar before, or can confirm this behaviour in other Browser(version)s or OSes?
EDIT: Here's the code on jsfiddle.net: http://jsfiddle.net/E4WwV/
In Firefox (I don't know if other browsers have that too) you have the possibility to set two default font-sizes:
Default font-size (16px)
Default font-size for text having the generic font-family monospace (13px)
Since the default font-size in my example is just 1em (for the textarea and the body) it's 1 times the default font-size which is 13px for all monospaced text and 16px for all other text.
Here is an article that has a great explanation and also a usable work-around to this:
http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
Textarea and body use different font families. Textarea defaults to using a monospace system font, and there is some weirdness for system fonts to size them based on your browser's font preferences in Gecko. So if your preference set the normal size for your monospace font to 13px, that's what you're going to end up with in this case...
Here is a simple code sample from a language switch in HTML. The CSS should separate the span elements and display a dot in between:
<html>
<head>
<style type="text/css">
.languageSwitch span:before {
content: "•";
padding: 0 4px;
font-weight: normal;
}
.languageSwitch span:first-child:before {
content: "";
padding: 0;
}
.languageSwitch .current {
font-weight: bold;
}
</style>
</head>
<body>
<div class="languageSwitch">
<span>Deutsch</span>
<span class="current">English</span>
<span>français</span>
</div>
</body>
</html>
This works fine in Firefox, but Internet Explorer 9¹ simply ignores the :before directive. In the “developers tools” CSS dialog the “content” property does not show up either. I have searched all over the web: There are pseudo-element issues IE 8, but IE 9 should know them, and this is “old” CSS 2.
Does someone have a clue why this fails (bug in IE 9?) or how the syntax must look like?
1) To be clear: Version 9.0.8112.16421 / “Updateversion” 9.0.6 (KB2675157)
Check the doctype. On jsfiddle, this works fine in IE9: http://jsfiddle.net/4nGW9/. IE8 should handle this as well.
I can see the dots fine in IE 9. Exact version as yours. Only difference in my code is a valid HTML5 doctype at the top.
Without a valid doctype IE could be switching its rendering for your page to quirks mode, or a rendering mode for IE8/IE7 which would not handle the pseudo selectors like first-child or generated content.
See your page here in browserling.
I have a problem getting the fonts in links for a menu to look the same across browsers. It wouldn't be such a problem if it was just a small difference, but the fact of the matter is that in IE 9 the font looks to be at least a couple of pixels or more bigger than in the others, while using the exact same css.
Now being in a main menu, this looks pretty bad. Anyone know why this happens, and what I can do about it?
Here's the css rule:
ul#menu li a
{
width: 80%;
text-align: center;
font-family: HelveticaNeueLight, Helvetica, Arial, Sans-Serif;
font-weight: bold;
font-size: 12px;
text-decoration: none;
line-height: 38px;
color: #333;
text-shadow: 0px 1px 0px #e5e5ee;
display: block;
/*Hiding dots around clicking on links*/
outline: none;
overflow: hidden;
}
If this is truly vital, and you do not mind using Conditional Comments to send IE-targeted CSS to the browser, you can create a Conditional Comment stylesheet for IE 9 like so:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="/ie9.css" />
<![endif]-->
With another CSS rule for the font-size property in this css file.
Otherwise, a good first step is to always use a CSS Reset to normalize between browsers. Commonly used resets are Eric Meyers and YUI.
Perhaps the CSS for some other property is inconsistent? I'd try using a CSS reset file (http://developer.yahoo.com/yui/reset/) or adding zoom: 100% in there to see if that fixes it.