Remember the code?

OK , I was working this my random sidebar image rotator. It uses ajax component to get html codes to show random images and it automatically rotates the image in every defined seconds.

In order to show horizontal and vertical images in a same spaced area, I have assigned pre defined squre div element and make the ajax component to get html codes and set innetHTML property of this <div> element. The <img> element should be aligned in the center using calculated top and left CSS property.

So this is what I wanted to display (Normal) viewd with Firefox.

But when I tried with IE 7, I got below. It seems as if the <style> tag didn’t exist. The image was not aligned properly in the center.


Here is my div injecting HTML code.

<style type="text/css">
.hana_ri {
	position: relative;
	width:180px;
	height:180px;
	/*border: 1px dashed grey;*/
}
 
.hana_ri span {
	position: absolute;
	width: 51px;
	height: 19px;
	display:block;
 
	top:80px;
	left:64px;
	background: url(http://localhost/wp/wp-content/themes/classic.neox/progress.gif) no-repeat;  
}
.hana_ri img {
	top:22.5px;
	left:0px;	
	position: absolute;
	width: 180px;
	height:135px;	
}
</style><div class="hana_ri"><a href="/wp/pics/IMG_2716.jpg"><img 
src="http://localhost/wp/wp-content/themes/classic.neox/hana_random_image.php?image=IMG_2716.jpg" 
title="IMG_2716.jpg" /><span id="hana_ri_span"></span></a></div>

My code looks OK. I tried almost anything blaming and cursing the IE, why it has to be so difficult to do a simple thing. Searching Internet for any hints.

And I finally got my answer from Microsoft MSDN Website. This is a link MSDN regarding innerHtml property of html element. It’s a nice little reference about innerHTML property. If you keep scrolling down to the bottom, there is a comment made by a user. It’s title is “How to inject NoScope elements into a page with innerHTML.”

This is the quote from the comment.

Internally, Internet Explorer treats the <script> tag as a NoScope element, which means (according to a rather opaque comment in the source) that “no text in a textrun should point to it.” Examples of other tags that have this attribute are HTML comments (<!-- -->) and STYLE tags. All NoScope elements are removed from the beginning of the parsed HTML before it is injected with innerHTML or insertAdjacentHTML. To prevent this from happening, you must include at least one scoped element at the beginning of the injected HTML.

To make it work, you must start the injected HTML string with a scoped element, preferably an invisible one like a hidden input element.

So basically the user is suggesting to start the innerHTML with the regular scoped element. He is suggesting to start with <input> with hidden attribute. If the innerHTML starts with <style>, IE will simply ignore it.

So I immediately changed the code and made the <style> to come after <div> element. And viola! , it worked just like a magic!!!!! I really appreciate ‘John Sudds’, the commenter.

So here is the final version that worked.

<div class="hana_ri"><a href="/wp/pics/IMG_2716.jpg"><img 
src="http://localhost/wp/wp-content/themes/classic.neox/hana_random_image.php?image=IMG_2716.jpg" 
title="IMG_2716.jpg" /><span id="hana_ri_span"></span></a></div>
<style type="text/css">
.hana_ri {
	position: relative;
	width:180px;
	height:180px;
	/*border: 1px dashed grey;*/
}
 
.hana_ri span {
	position: absolute;
	width: 51px;
	height: 19px;
	display:block;
 
	top:80px;
	left:64px;
	background: url(http://localhost/wp/wp-content/themes/classic.neox/progress.gif) no-repeat;  
}
.hana_ri img {
	top:22.5px;
	left:0px;	
	position: absolute;
	width: 180px;
	height:135px;	
}
</style>