I've noticed in IE9 that using the matrix DXIImageTransform will pixelate rotated text. I don't have this problem in IE8 or 7. Normally I would use the css3 options in IE9 but for reasons outside my control, the page renders in quirks mode (valid html5 iframe embedded in a 3rd party page with no doctype)
This is the code I'm using:
<!--Looks like crap but is my only option in quirks mode-->
<span style="position:absolute;
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);">
Does this make my butt look pixelated?
</span>
In IE8, the result rotated text is smooth, but in IE9 it's very pixelated. Compare to this (which doesn't work in quirks mode)
<!-- looks great but doesn't work in quirks mode-->
<span style="position:absolute; top:150px; -ms-transform: rotate(-45deg);">
Does this make my butt look pixelated?
</span>
To see it in action, check out this fiddle in IE9
http://jsfiddle.net/U4CCD/3/
My question, how can I rotate text in IE9, in quirks mode, that doesn't look all pixelated and blurry. Why did the matrix transform start sucking in IE9?
If you're fortunate enough not to be running IE9, this is what I'm seeing. The clearer example is how it looks in IE8 and how it looks using css3 transforms.
Ultimately I found that this simply could not be done with my current configuration. I was, however, able to work around it by wrapping my valid html5 page in an object that was then embedded in the iframe. In IE 9 this seemed to allow my page to render in the iframe in standards mode and use the SVG transforms that look clean. I created the following wrapper aspx script:
<%# Page Language="C#" %>
<%
string url = "app/path";
if(!String.IsNullOrEmpty(Request.QueryString["path"]))
url = HttpUtility.UrlDecode(Request.QueryString["path"]);
url += "?i=1";
if(!String.IsNullOrEmpty(Request.QueryString["id"]))
url += "&id=" + Request.QueryString["id"];
if(Request.Browser.Browser!="IE"||Request.Browser.MajorVersion!=9) {
Response.Redirect(url);
}
url += "&quirky=1";
%>
<html>
<head><title></title>
</head>
<body style="width:100%; height:100%; margin:0; padding:0; overflow:hidden;">
<object type="text/html" data="<% =url %>" style="overflow:hidden; width:100%; height:100%"></object>
</body>
</html>
Related
With NPAPI being faced out by Chrome, We've been trying to find a good alternative to an Applet we had for printing checks and invoices. There are many options, like NaCl and PNaCl from chrome (with PPAPI) however those really mean settling for chrome, which isn't a really good idea. Jumping from solution to solution we've found that it is possible to print absolute positions from HTML, like so:
<html style="font-family: courier new; font-size: 11pt;">
<body>
<div style="position:absolute; left:129mm; top:25mm"><<**.***,**>></div> <!-- PLC_POSICIONMTO -->
<div style="position:absolute; left:30mm; top:38mm;"><<<??????>>></div> <!-- PLC_POSICIONBENEFICIARIO -->
<div style="position:absolute; left:40mm; top:44mm;"><<<<**.***,**>>>></div> <!-- PLC_POSICIONMTO1 -->
<div style="position:absolute; left:20mm; top:56mm;">?????</div> <!-- PLC_POCISIONFECHA -->
<div style="position:absolute; left:82mm; top:56mm;">???</div> <!-- PLC_POCISIONANO -->
<div style="position:absolute; left:mm; top:mm;"></div>
<div style="position:absolute; left:mm; top:mm;"></div>
</body>
This is an example i made to test if the position works, those attributes will come from a DataBase. It all seems to work, however when trying to print from chrome to a dot matrix printer, the preview looks weirdly zoomed in, and doesn't print correctly, but when I print to a PDF and then to the Dot Matrix (or from firefox) it works like it shoul (somewhat). The page design in the Chrome Preview looks weird too, when the page is in portrait mode, it lookes squared, but in landscape mode it lookes as it should in vertical (and it seems to work fine until i print, where it prints as in landscape mode and not like the preview shows).
Does anybody have any idea why this is happening?. Or is there another solution that doesn't force me to use chrome alone as he company's browser?.
We have a graphic that doesn't render properly in IE10. It was working fine and then about a month ago, it quit working on IE10 but continues to display properly on Chrome and Firefox. I've read that HTML5 does not work properly with IE10. Is that the issue? Not sure of the fix.
<table width="" border="0" cellspacing="0" cellpadding="0"><tr><td width="220" valign="top">
<div class="menu">
<!--#if expr="${REMOTE_HOST} = /.usgs.gov$/" -->
<b>NGP Intranet</b>
<!--#endif -->
<p>
<!--#include virtual="include/tnm_menu.html"-->
</div>
<!--<p class="space"></p> --><br class="space" />
<img src="images/nav_spacer.jpg" width="185" height="1700" border="0" alt="This is a formatting graphic." />
</td>
Looking at the website you provided, not the fiddle as it is still pretty pointless as it doesn't replicate the issue at all, you can fix the "skewed" green space by adding to the CSS:
#nav {
padding:0;
}
For the other problem of the CSS menu, and possibly the above problem, I believe this is due to the HTML code being completely invalid. There are so many problems with the code that it doesn't know how to render it correctly. Give it a quick pass through a validator and you will see some errors. Firstly, you are using HTML5 elements, but declared the DOCTYPE as XHTML. And that's just the start, you have unclosed tags, obsolete attributes, unescaped characters, plus others.
The reason why this is a problem is that when using position:absolute the browser looks for the parent of the element but if it can't work it out, it could position the element anywhere. FF and Chrome work because they are less strict than IE over this, and I think this is an issue with FF and Chrome, they try to "fix" what the developer has done, but in my opinion this just breeds lazy and bad development.
Fix the issues, especially the unclosed tags, and it should help. (At least help narrow down the issue.)
When I add the '!DOCTYPE html' tag to my document, the images in the document revert to their native size (ignoring css width and height attributes).
I realize that adding the doctype changes the mode the browser displays the document in (the doctype enables 'standards mode' instead of 'quirks mode'). And that is probably the source of the problem. However, I don't understand specifically what 'standards mode' doesn't like about my code, or how to fix it.
What is wrong with the html I have written that 'standards mode' doesn't like?
I see this behavior in Chrome on Windows.
A simplified test case (with doctype, images appear very large, without it they appear smaller):
<!DOCTYPE html>
<html>
<body>
<img src="http://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png" alt="Wikipedia Logo" style="width:250; height:250;">
<img src="smiley.png" alt="Smiley Face" style="width:250; height:250;">
</body>
</html>
This is missing the head section, but nothing in the head section I had written made a difference or was necessary to reproduce the problem.
You have to use some unit of measurement when declaring sizes.
img{
width:250px;
}
style="width:250px"
On this site I'm gonna offer this Xmas to my brothers-in-law, I have a page structure like this:
<body>
<div id="container">
<div id="menu">[...]</div>
<div id="wrapper">
<div id="section1">[...]</div>
<div id="section2">[...]</div>
etc etc etc
</div>
</div>
</body>
All looks perfect on Firefox... but on my IE9, the page isn't aligned and the #font-face isn't loading either...
The CSS goes like this (looks to me there's no problem here)
#container{width:960px;margin:0 auto;position:relative}
#wrapper{width:780px;float:right;margin-bottom:30px}
#menu{width:180px;float:left;background:url(../img/site/menu_bg.jpg) repeat-y right;height:100%;position:fixed;padding-top:55px}
Already tried a different set-ups with no change at all ... and I'm starting to rip my hair off here ... any suggestions?
Thanks in advance.
PS: If it helps ... the page in question is: www.sweetdreams.pt/escondido.php
EDIT: As requested ... this is the beggining of the code in the page:
<?php if(!ob_start("ob_gzhandler")) ob_start(); ?>
<!DOCTYPE html>
<html lang="pt-PT">
Are you by any chance running IE in Compatibility Mode? (check this by pressing F12 and looking at the Developer tools below in the browser window.
EDIT:
In IE, it pays to have a DOCTYPE declaration, otherwise it will just go to Quirks mode.
Please do post full HTML source.
The document type declaration must be at the very first line in the file, otherways it's ignored. It also must not preceeded by any characters, i.e. no blank lines, spaces, tabs, nothing, just <!DOCTYPE html>.
instead of { margin: 0 auto; } try...
#container {
position: absolute;
left: 50%;
width: 960px;
margin-left: -480px; /* half of width */
}
I have a site here: bgflirt.com
On the right side of the pictures in the middle is a div tag that shows nothing in everything but firefox. There is a flash object over there and a "test" string. Any ideas why it doesn't show in IE and Chrome ?
First thing, try to load flash object with SWFObject. It makes it easier to embed flash animation into your page and takes care about browsers problem.
Second thing, you got this in your code just before your swf insertion :
<div class="entry">
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:TrackMoves/>
<w:TrackFormatting/>
<w:HyphenationZone>21</w:HyphenationZone>
<w:PunctuationKerning/>
<w:Valida… Още..
</div>
You use a strict doctype. It can lead to problem depending on browser.