Unexplainable extra line in <pre> in IE9 - html

I have the following HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
tr{vertical-align: top;}
</style>
<script type="text/javascript">
function ready() {
s = '';
t = '';
for(var i=1; i<=450; ++i)
{
s += i + '\n';
t += i + '\r\n';
}
document.getElementById("numbers1").innerHTML = "<pre><code>"+s+"</code></pre>";
document.getElementById("numbers2").innerHTML = "<pre><code>"+t+"</code></pre>";
}
</script>
</head>
<body>
<table id="wrap"><tr>
<td id="numbers1"></td>
<td id="numbers2"></td>
</tr></table>
</body>
<script type="text/javascript">
ready();
</script>
</html>
In IE9, when rendered in IE9 Standards mode (the default for the above HTML) there is a blank line in the right column between numbers 428 and 429 (see pic)
This is only in IE, and only in full IE9 Standards mode.
Can anyone explain this very odd behavior? Why only at that line? If it was every line, I could understand that it was showing \r\n as 2 line breaks.
Here is the fiddle http://jsfiddle.net/K2SUU/

This must be some kind of IE9 rendering bug with the way you are setting the innerHTML. If I move the <pre><code> wrapper to the HTML and only use innerHTML to set the text, the problem disappears:
<table id="wrap"><tr>
<td><pre><code id="numbers1"></code></pre></td>
<td><pre><code id="numbers2"></code></pre></td>
</tr></table>
...
document.getElementById("numbers1").innerHTML = s;
document.getElementById("numbers2").innerHTML = t;
http://jsfiddle.net/K2SUU/1/
You are right, though, it does seem to be unexplainable. The comments on your question suggest it only happens in specific versions of IE9. Mine is 9.0.8112.16421 according to the About Internet Explorer dialog box.

Related

CSS Containment(contain: layout) doesn't work on Chrome 62

I'm trying to use CSS Containment(contain: layout), but it doesn't seems to work correctly on Chrome 62.
I want to know a proper way to use contain: layout or what is my misunderstanding.
Code is here:
index.html:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS Containment</title>
<script src="main.js" defer></script>
</head>
<body>
<div id="container" style="contain: layout; height: 300px; width: 300px">
</div>
</body>
</html>
main.js:
const container = document.querySelector('#container');
setTimeout(() => {
const elem = document.createElement('div');
elem.textContent = 'content';
container.appendChild(elem);
}, 100);
I expect that the #container element is rendered as a layout root after appendChild(elem), but Chrome Dev Tool shows that the root is still the #document.
On the other hand, contain: layout size or contain: strict works correctly, which means #container becomes a layout root.
Other browsers don't support CSS Containment yet, so I can't identify it's Chrome-specific or on the spec.
If you have any ideas, please give me a hand.

Why is not possible to update dynamically the HTML DOM structure when `<!DOCTYPE html>` is specified?

I have this HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Clear a Timer</title>
<meta charset="utf-8" />
<script>
var theTimer, xPosition = 0, theImage;
function doTimer() {
theImage = document.getElementById("courseraLogo");
xPosition = xPosition + 1;
theImage.style.left = xPosition;
}
</script>
</head>
<body onload="theTimer = setInterval(doTimer, 50)">
<img src="../img/coursera.png" id="courseraLogo"
style="position:absolute; left:0">
<button onclick="clearTimeout(theTimer);">
Stop!
</button>
</body>
</html>
The code is supposed to move an image from left to right at an interval of 50ms. It does not work if a specify the DOCTYPE tag: the image does not move. Why this is happening? Is there any compatibility issue related to the HTML version? Or do I need to use a similar method to setInterval compatible with HTML5?
You need to include the units when setting style.left:
theImage.style.left = xPosition + "px";
This isn't strictly speaking an HTML5 thing. Omitting the units works only if you include no doctype at all: including an HTML4 doctype such as <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> will also cause your script to fail unless you include the units.
(I tested this in current versions of Safari, Chrome, and Firefox on OS X; all three behaved identically.)

Google Chrome Changes elements to lowercase

I have a HTML file like this:
<html>
<head>
<title>Test</title>
<script language="javascript">
function removeElements() {
alert( document.getElementById("FileArea").innerHTML );
var RemoveElms = document.getElementsByTagName("p");
for (i = 0; i < RemoveElms.length; ++i) {
var newelm = document.createElement("SubScript");
newelm.innerHTML = "1";
RemoveElms[i].parentNode.insertBefore(newelm, RemoveElms[i]);
}
alert( document.getElementById("FileArea").innerHTML );
}
</script>
</head>
<body id="BodyID">
<h2>Test</h2>
<input type="button" value="Remove elements" onmousedown="removeElements(); return false" unselectable="on">
<div id="FileArea"><p>Here is a test</p></div>
</body>
I am trying to add an element <SuperScript>. In the alert all the characters of this element changed into lowercase <superscript>. Can I control this? This is mainly happening in Chrome.
Chrome parses all elements and adds them to the document in an uniform way. This also happens with newlines and such.
See this: Case conventions on element names?

remove the error in html5 canvas

I'm just trying to create a canvas in my browser with the following code :
<!DOCTYPE html>
<html lang="eng">
<head>
<title<abc</title>
<script type="text/javascript">
window.onload=canvasApp();
function canvasApp()
{
var canvas=document.getElementById("one");
if(!canvas||!canvas.getContext)
return;
}
</script>
<meta charset="utf-8">
<body>
<canvas id="one" width="400" height="500">
Your browser doesn't support canvas
</canvas>
</body>
</html>
Why i'm getting canvas=null in the following line
var canvas=document.getElementById("one");
(I'm using the latest versions of chrome and firefox)
Your HTML leaves somewhat to be desired.
Give the W3C Validator a go. Right now it reports 7 Errors and 4 warnings.

Adjusting IFrame Height only Chrome

SO I know this solution is somewhere but I can't find it. I've been digging for about a day into google and stackOverflow.
Basically, I have an iframe and I'm trying to get it to expand to the size of its contents, a pretty simple task. I went through several methods, looking at different heights etc. But for some gosh darn reason, Chrome does not want to put up with me.
So here is the javascript to resize the IFrame. To make sure JS was working and to read the height I threw in that innerHTML piece (sort of like debugging)
<script type="text/javascript">
function resizeFrame() {
var t=document.getElementById("Footer");
var f = document.getElementById("mainContent");
var y = f.contentWindow;
t.innerHTML = y.document.body.offsetHeight;
f.height = y.body.offsetHeight;
}
</script>
Here's the iframe:
<iframe onload="resizeFrame()" id="mainContent" src="homec.html" scrolling=auto frameborder=0 height="100%" width="100%">
Not working!</iframe>
So for some odd reason, it does not want to work, pretty much hates me in Chrome. But it works in Firefox and IE. Any solutions??
Unless I'm missing something, I believe you have a typo on the last line of your function (missing .document.)
The following works for me in Chrome (18.0):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function resizeFrame() {
var t=document.getElementById("Footer");
var f = document.getElementById("mainContent");
var y = f.contentWindow;
t.innerHTML = y.document.body.offsetHeight;
f.height = y.document.body.offsetHeight;
}
</script>
</head>
<body>
<iframe onload="resizeFrame()" id="mainContent" src="homec.html" scrolling=auto frameborder=0
height="100%" width="100%">Working!</iframe>
<p id="Footer"> Footer</p>
</body>
</html>