how to get IE to recognize DOM attributes

garydale · #1 11-04-2009, 12:41 PM

I want to separate content from formatting, but IE seems to want them to stay together. Basically, I'm loading the content from an XML file then using Javascript to create the page. I use CSS to describe the formatting based on the elements, or in some cases the classes, on the page.

Unfortunately, IE (8 - but I recall having the same problem in 6 and 7) seems to ignore this. For example, I can create a "b" element but the text won't go bold. Or I can setAttribute('style', 'font-weight: bold') and it again is ignored. If I setAttribute the class to something that is defined as bold in the .css, it is again ignored. Finally, if I define the element style as "font-weight: bold" in the .css, it's still ignored.

I'm using bold as an example, but it is happening no matter what formatting I try to apply. This includes text-align or cell alignment properties.

Anyone know how I can set the formatting without mixing it in with the content?

kaafmim · #2 11-04-2009, 01:09 PM

IE works fine with DOM. IE is full of problems for sure, but I have never encountered such problem. If you post your source code, we may be able to help you my friend.

garydale · #3 11-04-2009, 01:21 PM

Here's an example:

var boxTitle = document.createElement('b');
var boxText = document.createTextNode(x[i].childNodes[pName].firstChild.nodeValue);
boxTitle.appendChild(boxText);
boxTitle.setAttribute('style', 'font-size: large;');

boxTitle later gets appended to another element, etc.

Or you can try:
curCell.setAttribute('style', 'vertical-align: top; padding: 10px');

Also, using the .css to format:
curSpan.setAttribute('class', 'personname');

All of these and more work fine with Firefox but I get nothing with IE.

kaafmim · #4 11-04-2009, 01:42 PM

My friend, The problem is with IE, and not firefox! You cannot change the style of a text node like this. Istead of appending it to the container, you should append it to a style element. Something like this might help you:

Code:

var boxTitle = document.createElement('p');
var boxText = document.createTextNode(x[i].childNodes[pName].firstChild.nodeValue);
var boxFont = document.createElement("font");

boxFont.style.fontWeight = "bold";
boxFont.appendChild(myText);

boxTitle.appendChild(boxFont);

Tell me about the results.

garydale · #5 11-04-2009, 03:09 PM

OK, I was able to get formatting by changing a span element to a font element then setting the style attribute "fontweight" to bold. My code would look something like this (from your example):
var boxFont = document.createElement("font");
boxFont.style.fontWeight = "bold";
var boxText document.createTextNode(x[i].childNodes[pName].firstChild.nodeValue);
boxFont.appendChild(boxText);
boxTitle.appendChild(boxFont);

I even managed to get the vertical-align in a cell to work. Still, I'm not entirely happy with this result. I'd prefer to use the style sheet to specify the formatting instead of having it in a Javascript routine. Any ideas on how to get that to work?

kaafmim · #6 11-04-2009, 06:32 PM

Alright my friend, I wrote this html, and tested it on ie8, firefox, safari and opera. Works as expected. Hope it helps you. It first uses predefined css for styling, and then modifies one property, then changes the whole css definition.

Code:

<html>
	<head>
		<style type="text/css">
		tag {
			color: #f00;
			
		}
		</style>
	</head>
	
	<body>
		<script type="text/javascript">
	
			var boxText = document.createTextNode("Test Text");
			var boxStyle = document.createElement("tag");
			
			boxStyle.appendChild(boxText);
			
			document.body.appendChild(boxStyle);
			
			changeStyle = function () {
				boxStyle.style.cssText="border:1px solid #333;padding:5px;background:#ccc;color:#ff9;";
			}
			changeColor = function () {
				boxStyle.style.color="#00f";
				setTimeout(changeStyle,2000);
			}
			setTimeout(changeColor,2000);
	
		</script>
	</body>
</html>

garydale · #7 11-04-2009, 11:19 PM

Actually, I was just logging in to say I'd got it to work. It turns out that the Javascript interface to DOM is somewhat inconsistent (name clashes with css). Once I got the various exceptions coded properly, things began to work.

Thanks!

**Kor** · #8 11-05-2009, 04:18 AM

Just a note: why do you create a FONT element? FONT element is deprecated in HTML 4.01 and it is not supported in XHTML. You should create a SPAN element, and style it (or give it a class)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)