firefox issues

[Ninjakreborn]

I have created a table that contains tabular data.  I had the need to make it hide/show columns (using jquery).

Now, It is working perfectly in IE, but there are problems in firefox.

I am basically doing the sections in t-bodies.  It took me quite awhile to get the hide/show features working right, and they

are perfect in ie, but there messing up in firefox.  There are gaps in between the sections and other small issues.

I have used FF developer tools, to disable all css one at a time.  Inline, internal, and each external one (one at a time), and I haven't

found any issues that was actually causing the problem.

Now I need to figure out what's causing it but I am having no luck.

This project is from a private client so I can't show a lot of "project specific" stuff, but I can post some of the 'non-related' code.

 

For example, the whole thing is done with a giant table.

It has each hide/show section in a t-body.

 

It is then powered by a few basic functions which show/hide the sections as needed (with programming here and there throughout the view page in order for it to work properly.

 

Below I have included the basic javascript function, with project specific relations taken out.  This will show you what I am trying to do

nevertheless.

var selected_tab = "";

function hide_element(elementName) {
	var c = $('#'+elementName+'_collapsable');
	if (c) {
		c[0].app_width = c.width();
		c.hide('slow');
	}
	c = $('#'+elementName+'_title');
	if (c) {
		var a = $('a:first', c);
		if (a) {
			a.before('<a href="javascript:void" onclick="return show2_element(\''+elementName+'\');">{{$html->image('plus.gif')}}</a>');
			a.remove();
		}
	}
	return false;
}

function show2_element(elementName) {
	var d = $('#' + elementName + '_collapsable');		
	if (d)
		d.show('slow', function(){ 
			var d=$('#'+elementName+'_collapsable'); 
			d.width(d[0].app_width).css("display", "");
	});
	c = $('#'+elementName+'_title');
	if (c) {
		var a = $('a:first', c);
		if (a) {
			a.before('<a href="javascript:void" onclick="return hide_element(\''+elementName+'\');">{{$html->image('minus.gif')}}</a>');
			a.remove();
		}
	}
	return false;
}
function show_third(elementName) {
	var d = $('.' + elementName + '_expand');		
	if (d)
		d.show('slow', function(){ 
			var d=$('.'+elementName+'_expand'); 
			//d.width(d[0].app_width);
			d.css("display", "");
		});
	c = $('#'+elementName+'_title');
	if (c) {
		var a = $('a:first', c);
		if (a) {
			a.before('<a href="javascript:void" onclick="return hide_third(\''+elementName+'\');">{{$html->image('minus.gif')}}</a>');
			a.remove();
		}
	}
	return false;
}

function hide_third(elementName) {
	var c = $('.'+elementName+'_expand');
	if (c) {
		//c[0].app_width = c.width();
		c.hide('slow');
	}
	c = $('#'+elementName+'_title');
	if (c) {
		var a = $('a:first', c);
		if (a) {
			a.before('<a href="javascript:void" onclick="return show_third(\''+elementName+'\');">{{$html->image('plus.gif')}}</a>');
			a.remove();
		}
	}
	return false;
}

That code will show you exactly what is causing the hide/show.

I just need to figure out what I need to do in order to remove the css issues in firefox, or how to make it work

right in firefox.

Also it uses jquery as the javascript framework.

[dbrimlow]

If it ain't the css, then it's the markup. If it works in IE but not FF, then it's either invalid or designed TO work in IE only.

 

Have you validated it? Are you getting red exclamations on the developer toolbar?

 

I know you already know this stuff.

 

My advice would be to save a copy of your current css as ieonly.css. THEN, tweak the original css until it works in FF (don't even look at IE, yet).

 

Once it works in FF, use a conditional comment linking to ieonly.css to have IE use that css (that initially worked fine in IE), while real browsers use the modified one.