I have 'OCR A Extended' font installed in Windows and I created the following test.html file, but in Chrome only the OCR A gets rendered as OCR text (class p.b), OCR A Extended (class p.a) gets rendered (computed) as Times New Roman, what's going on? In IE both are rendered as OCR. Same behavior in Windows 7 and Windows 10. Looks like a bug to me.
<html>
<head>
<style>
p.a {
font-family: "OCR A Extended";
}
p.b {
font-family: "OCR A";
}
</style>
</head>
<body>
<p class="a">1234567890</p>
<p class="b">1234567890</p>
</body>
</html>
Related
I'm learning to develop a Firefox add-on. I've made a simple dev-tools tab with an input box. I'm finding that I can type every character into the input box with the exception of "/" or "'". A forward slash or single quote will not populate. Nothing appears in the input box when I type these characters.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
}
.warpath-search{
width:100%;
background-color:#fcfcfc;
border:1px solid #f0f1f2;
padding:.3em;
}
.warpath-search label{
width:100px;
display:inline-block;
}
.warpath-search input{
width:400px;
}
</style>
</head>
<body>
<div class="warpath-search">
<label>Xpath:</label><input type="text" name="warpath-xpath" id="warpath-xpath" />
</div>
<script src="devtools-panel.js"></script>
</body>
</html>
devtools-panel.js:
input = document.getElementById("warpath-xpath");
input.addEventListener("keyup", () => {
console.log(input.value);
});
Gif:
If I load the plugin's HTML file directly in the browser I can enter the characters but when it is loaded as a plugin it's blocked.
Using Firefox: 70.0.1 (64-bit)
The problem seems to have something to do with a Firefox type-ahead feature. The following steps resolved the issue for me:
Open about:config in the browser
Click "I accept the risk"
Search for "accessibility.typeaheadfind.manual"
Change the value of this key from "true" to "false"
I have two Windows computers, both with Outlook 2007. I send both an HTML email with stuff like:
<div style='font-family:Times New Roman,Serif;font-size:11pt'> ...
I need it to be Times New Roman, 11pt font. In one Outlook it shows up correctly as Times 11pt, in the other, Arial 12pt. I can get the second one to display Times by using surrounding content with a tag like:
<font face='Times New Roman' size='3'>...
But the size is mapped to 12pt, and size=2 is 10pt. I see no way yet to specify the size in px or pt. This tag is disturbing because we're in the year 2013.
I understand that Outlook HTML email rendering is a disaster because it defers to Word instead of IE for rendering. But why the difference? And can I do something to get the second copy of Outlook to act like the first one? Or is there some other way to tell it: "11pt".
Here is my most recent attempt at the HTML sent to Exchange...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body, div, p, table, td {
font-family:TimesNewRoman, "Times New Roman", Times, Serif;
}
</style>
</head>
<body style='font-family:TimesNewRoman, "Times New Roman", Times, Serif;font-size:11pt;'>
<font style="font-family: TimesNewRoman, "Times New Roman", Times, serif; font-size: 14px; color: #000000;">
<p>Blah blah.
</p>
</font>
</body></html>
I had a similar problem, but I only have Office 2010, so I can't verify that this would work for 2007. In case it helps, I've shared the basic structure of my HTML for Outlook messages below. The key differences I see from the original question are the style type "text/css" and the enclosing comment tags around the styles. Note that other elements, like td, th, table, etc., can be styled in this block as well.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>My Title</title>
<style type="text/css">
<!--
body { font-size: 10pt font-family: sans-serif; }
-->
</style>
</head>
<body>
blah, blah
</body>
</html>
Times isn't a font in Windows (I believe that is the Mac name for Times New Roman).
Courtesy of cssfontstack, Try something like this:
font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
Beyond this try using the quotation marks fallback in the example above to see if that makes a difference. Also, apply your css styles to a <font> tag or a <td> directly. Div's are not really recommended for html email, so I'd avoid them wherever possible. I use font tags almost exclusively to style text and they always seem to come through for me.
I' try to drawing canvas using example2 taken from http://dev.opera.com/articles/view/html5-canvas-painting/. It works on Firefox 8.0.1 and Opera 11.52.
Then I modified the code put the canvas into a table cell and stop working.
I tried to put canvas outside the table and absolute positioned the canvas on a cell table still doesn't work.
The above problem happened only on Firefox, running well on Opera.
Here's the code
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Sign-In</title>
<style type="text/css"><!--
#imageView { border: 1px solid #000; }
--></style>
</head>
<body>
<p>Please fill in name and id card no. Then sign-in on provided box</p>
<table>
<tr><td>Full Name</td><td><input name="name"><td> </tr>
<tr><td>ID Card No</td><td><input name="idcard"><td> </tr>
<tr><td>Signature</td><td>
<div id="container">
<canvas id="imageView" width="200" height="100"> </canvas>
</div>
</td> </tr>
</table>
<script type="text/javascript" src="http://dev.opera.com/articles/view/html5-canvas-painting/example2.js"></script>
</body></html>
Any idea?
Well, here is your code in jsfiddle: http://jsfiddle.net/7PRDq/
The problem is almost certainly the mouse handling code giving a bad X,Y in Firefox. If you try to draw a signature in the upper-left corner of the box you'll see that it is drawing with an incorrect offset.
If you make the canvas 2000x1000 instead of 200x100 you'll see the problem much more clearly!
You'll need to find more modern mouse code for FireFox.
I try a simple css3 media queries that will change background color when I change the browser to 480px width. It works fine when i put the files on my site, here: http://www.kangtanto.com/css3/ . But when I try the same files on my other site, with https, the media queries just won't work, the background color won't change when I change my browser size to 480px width. it is on my other site at https://dosenjaga.eepis-its.edu/home.html
this is my html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width:480px)" href="css3.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Ini hanya mencoba saja lho</h1>
</div>
<div id="content">
Adding the specific code for devices inline might be a good way to use media queries if
you only need to make a few changes, however if your stylesheet contains a lot of
overwriting or you want to completely separate the styles shown to desktop browsers and those used for small screen devices, then linking in a different stylesheet will enable you to keep the CSS separate.
</div>
</div>
</body>
</html>
and this is my style.css file. On my other site I use style2.css, because there is a file with the same name on my server, so I gave it other name but the code is the same.
div#wrapper { width: 800px;}
div#header{
background-image:url(media_queries.png);
height: 93px;
position:relative;
}
div#header h1{
font-size:140%;
}
#content{
float:none;
width:100%;
background-color:#CCC;
}
#navigation{
float:none;
width:auto;
}
and this is my css3.css code
#media only screen and (max-width:480px){
div#wrapper { width: 400px;}
div#header{
background-image:url(media_queries.png);
height: 93px;
position:relative;
}
div#header h1{
font-size:140%;
}
#content{
float:none;
width:100%;
background-color:#8787C1;
}
#navigation{
float:none;
width:auto;
}
}
Thanks,
It is the problem of older versions of IE not the https, CSS3 is not supported in less then IE9. in IE9 it is working fine.
It's solved!!! I need to delete all my browser history by pressing Shift+ctrl+del on my fire
I've looked all over for more information on this, and would like to know why it happens.
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<div style="position:absolute; top:200px; left:200px; height:200px; width:200px; border:1px solid black; filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9886188373396114, M12=-0.15044199698646263, M21=0.15044199698646263, M22=0.9886188373396114);">
<div style="position:absolute; top:10px; left:10px; border:1px solid darkblue;">
I do not rotate in IE 8.
</div>
</div>
</body>
</html>
The problem is that absolutely or relatively positioned elements within a div that has been rotated using MS's dximagetransform.matrix do not inherit the transformation in IE 8.
IE 6 & 7 render correctly, and I can solve the IE8 problem by triggering compatibility mode, but I'd rather not do that. Does anyone have any experience with this? I'm using css3 transform on other browsers and using dximagetransform.matrix to achieve this effect in IE.
EDIT: Added the opening html tag. Problem still exists.
http://i45.tinypic.com/nf4gmq.png
I solved it magicaly just adding z-index: 1 to parent element with matrix filter. Well, any z-index should work.
I think the position absolute stops the filter from inheriting. I found the same thing when I was experimenting with blur filters recently, except in that case I wanted a way to make the filters stop inheriting. I hadn't realised IE8 was different from IE6/7 in this respect.
Is this the effect you're trying to get?
(source: boogdesign.com)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<div style="position:absolute; top:200px; left:200px; height:200px; width:200px; border:1px solid black; filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9886188373396114, M12=-0.15044199698646263, M21=0.15044199698646263, M22=0.9886188373396114);">
<div style="margin-top:10px; margin-left:10px; border:1px solid darkblue;">
I do not rotate in IE 8.
</div>
</div>
</body>
</html>
Of course, if you needed the child element absolutely position for a specific reason you may be out of luck (might be able to achieve something with floats, but it would depend exactly what you needed).