www.webdeveloper.com
Results 1 to 8 of 8

Thread: how to get IE to recognize DOM attributes

  1. #1
    Join Date
    Nov 2009
    Posts
    8

    how to get IE to recognize DOM attributes

    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?

  2. #2
    Join Date
    Nov 2009
    Posts
    36
    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.

  3. #3
    Join Date
    Nov 2009
    Posts
    8
    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.

  4. #4
    Join Date
    Nov 2009
    Posts
    36
    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.
    Last edited by kaafmim; 11-04-2009 at 01:49 PM.

  5. #5
    Join Date
    Nov 2009
    Posts
    8

    works but...

    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?

  6. #6
    Join Date
    Nov 2009
    Posts
    36
    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>

  7. #7
    Join Date
    Nov 2009
    Posts
    8

    Thanks.

    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!

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles