Table does not showup on IE

[jigarshah]

I am creating a table dynamically with javascript. It does showup correctly on Firefox but not on IE. Don't know whats the issue. If i do "view source" then i do see source for the same. I think there is something wrong with CSS. I am seriously not getting anything. Don't know whats wrong please help me.

Thanks a lot in advance.
http://jigarshah.net/videos.html?pla...D188F8C9901AA4

[jscheuer1]

It's not the css. If I disable all style, the images in the table do not show up anywhere in IE, they are not there in Opera either. They show up at the bottom in FF.

If I could see the script you are using to make the table (IE is finicky about using the DOM level 2 createElement methods to make a table, the older insertRow, insertCell methods work better), I might be able to help out. I looked around, but you have so much script code, I couldn't tell what was what. Also, the absence of the images in Opera tends to implicate some other problem, as Opera does DOM level 2 just fine with tables.

[jigarshah]

It's not the css. If I disable all style, the images in the table do not show up anywhere in IE, they are not there in Opera either. They show up at the bottom in FF.

If I could see the script you are using to make the table (IE is finicky about using the DOM level 2 createElement methods to make a table, the older insertRow, insertCell methods work better), I might be able to help out. I looked around, but you have so much script code, I couldn't tell what was what. Also, the absence of the images in Opera tends to implicate some other problem, as Opera does DOM level 2 just fine with tables.

Thanks a lot for your reply.

I am trying to simplify and add comments in javascript. But if you look at "generated source" (right click -> view source...), it does show code for table. If as you said its an issue with IE DOM handling then it would have not printed it right...? (I am not an expert but still was thinking..Ignore if too naive ) And i have used similar code elsewhere too like jigarshah.net/photos.html.

Thanks again.

[jscheuer1]

There's no generated source code view in IE. If I view source in IE, the table is of course not there. If I use IE's developer extension, which I happen to have, the table is there, but it isn't a valid table, as it has no <tbody>. A DOM generated table that is valid would automatically have a <tbody> element. All the markup that you intend to be there appears to be there but isn't showing up. If I use the IE developer extension to remove all styles (the only thing that could make otherwise valid code unseen) from the page, it still doesn't show up.

There's not much more I can tell than that, except that they do not show up in Opera either, so it isn't an IE only thing, they do show up in Safari 3 Win, but its activity window indicates that there are 3 resources missing (probably images, but the could be external files) that were called for by javascript, but doesn't identify what those resources are. This could be preventing IE from firing certain onload events that may be crucial to your other issue.

I tried making a local copy of the page for analysis, but then it stopped working even in FF. But it was strange, three links showed up, in FF and IE, but instead of being in a table, they were in a list element:

My Personal Videos
US Trip
Video Songs

Did you write the code that makes the table, or just the code that calls the code that makes the table?

[jscheuer1]

I looked into this a bit further and realized the reason for the list instead of the table was that I hadn't passed the query string to my local copy. Once I did that, it acted just like the live copy, and I was able to get it to work in IE by adding the <tbody> element (from your youtube2.js file, changes highlighted):

function listVideos(json,divid) {
	//replacing ul-li with tables. difficult to use CSS :)
	//$("<table border=0>");
	var columns = 3;
	var table = document.createElement('table');

	table.setAttribute('border','0');
	//$("</table>");
	divid.innerHTML = '';
	if(json.feed.entry){
		var tb = document.createElement('tbody');
		var tr = document.createElement('tr');
		for (var i = 0; i < json.feed.entry.length; i++) {
			var entry = json.feed.entry[i];
            title = entry.title.$t;
			title = title.replace(/\"/g,"&quot;");
			title = title.replace(/\'/g,"&lsquo;");
			for (var k = 0; k < entry.link.length; k++) {
				if (entry.link[k].rel == 'alternate') {
					url = entry.link[k].href;
					break;
				}
			}
			var thumb = entry['media$group']['media$thumbnail'][1].url;
			var td = document.createElement('td');
		  
			if(cleanReturn == 1){
				if(inlineVideo == 1){
					td.innerHTML = '\n\n<a href="javascript:videoOverlay(\''+getVideoId(url)+'\',\''
						+title+'\',\''+url+'\');"><img src="'+thumb+'" class="youtubethumb" alt="'
						+entry.title.$t+'"  onmouseout="clearTimeout(timer)" onmouseover="mousOverImage(this,\''
						+getVideoId(url)+'\',2)"></a>'+'<br />';
					
					var table1 = document.createElement('table');
					table.setAttribute('border','0');
					var tr1 = document.createElement('tr');
					var td1 = document.createElement('td');
					tr1.appendChild(td1);
					table1.appendChild(tr1);
					td.appendChild(table1);
					td.innerHTML = td.innerHTML +'<a class="standard" href="javascript:videoOverlay(\''
						+getVideoId(url)+'\',\'' + title + '\',\''+ url +'\');">' + title + '</a>\n\n';
					
					tr.appendChild(td);
				}else{
					td.innerHTML = '<a href="'+url+'"><img src="'+thumb+'" class="youtubethumb" alt="'
						+entry.title.$t+'" onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\''
						+getVideoId(url)+'\',2)"></a>';
				}
			}else{
				td.innerHTML = entry.content.$t;
			}

			tr.appendChild(td);
			tb.appendChild(tr);
			//table.appendChild(tr);
			if(i % columns == columns-1) {
				var tr = document.createElement('tr');
				//var br = document.createElement('br');
				//var td = document.createElement('td');
				//tr.appendChild(br);
				tb.appendChild(tr);
			}
			/*if (i % columns == columns-1) {
				var tr = document.createElement('tr');
				var td = document.createElement('td');
				var br = document.createElement('br');
				
				//var tr1 = document.createElement('tr');
				//var td1 = document.createElement('td');
				//var tr2 = document.createElement('tr');
				td.appendChild(br);
				tr.appendChild(td);
				//tr1.appendChild(td1);
				table.appendChild(tr);
				//table.appendChild(tr1);
				//table.appendChild(tr2);
				//$("</tr><tr><td><br></td></tr> <tr><td></td></tr> <tr>");
				}*/
		}
	}else{
		divid.innerHTML = 'No Results Found';
	}
	//alert(table.innerHTML);
	table.appendChild(tb);
	document.getElementById(divid).appendChild(table);
}

This still didn't fix things in Opera. It has an issue with:

Line 1 of linked script http://gdata.youtube.com/feeds/api/playlists/34D188F8C9901AA4?alt=json-in-script&callback=youtubePlayList

Not much we can do about that.

[jigarshah]

Got it john. thanks a lot

But i am still having an issue in Opera. Not as you described above, But here if you go to

http://jigarshah.net/videos.html?pla...D188F8C9901AA4

You will 6 thumbnails on IE and FF. On Opera it shows 4

Thanks again tbody is really something i missed. Can you suggest me some source where i can find some solution to convert these tables into CSS ?Keeping Content and rendering separate ?

[jscheuer1]

Using Opera 9.52 I see 6, just like in FF. To style multiple DOM generated tables in css, you would give them all the same className property. Like (in your javascript, after table1 is created):

table1.className = 'innerTable';

Then in your stylesheet, all tables created like that would have this (highlighted) selector:

.innerTable {
border: none;
}

You could also style its cells:

.innerTable td {
background-color: yellow;
}

etc.

[jigarshah]

Strange...!!
i am on Fedora 9
Opera 9.52 build 2091

http://jigarshah.net/videos.html?pla...D188F8C9901AA4

I see 4 thumbnails only ?

Screenshot attached.

Regarding tables style. Actually i want to get rid of tables like Tables with CSS. but issue i face because of floating layout. When i try to draw table using CSS and add my thumbnails there it need few element as floating. It becomes like nested float. Will post experiment web page for the same. Just wanted to know if you have some guide for removing tables with css.

What an ideal website should have ? table / css for display ? Few places say its good to decouple content from styling. Tables are easier to fix. sometimes i find CSS very weird on browsers. But tables are difficult to maintain. Plus CSS gives liquid layout. So if i shrink screen it adjust those 'cells'

once again thanks a lot.