how to figure out what is causing the notorious firefox css errors...

[Greywacke]

hi there,i have managed to keep the scripts clean of these since i started development for the current client since december 2009.however, he has requested an auto-complete functionality, and for this i added the phpguru one, which seems to work the best.however - the one function, displayed below - causes the warning below the function to display in the error console.the function:

function AutoComplete_ShowDropdown(id) {	AutoComplete_HideAll();	var value = __AutoComplete[id]['element'].value;	var toDisplay = new Array();	var newDiv    = null;	var text      = null;	var numItems  = __AutoComplete[id]['dropdown'].childNodes.length;	// Remove all child nodes from dropdown	while (__AutoComplete[id]['dropdown'].childNodes.length > 0) {		__AutoComplete[id]['dropdown'].removeChild(__AutoComplete[id]			['dropdown'].childNodes[0]);	}	// Go thru data searching for matches	for (i=0; i<__AutoComplete[id]['data'].length; ++i) {		var lval = __AutoComplete[id]['data'][i].toLowerCase();		if (lval.substr(0, value.length) == value.toLowerCase()) {			toDisplay[toDisplay.length] = __AutoComplete[id]['data'][i];		}	}	// No matches?	if (toDisplay.length == 0) {		AutoComplete_HideDropdown(id);		return;	}	// Add data to the dropdown layer	for (i=0; i<toDisplay.length; ++i) {		newDiv = document.createElement('div');		newDiv.className = 'autocomplete_item'; // no use setAttribute()		newDiv.setAttribute('id', 'autocomplete_item_' + i);		newDiv.setAttribute('index', i);		newDiv.style.zIndex = '299';		// Scrollbars are on display ?		if (toDisplay.length > __AutoComplete[id]['maxitems'] && 			navigator.userAgent.indexOf('MSIE') == -1) {				newDiv.style.width = __AutoComplete[id]['element'].					offsetWidth - 22 + 'px';		}		newDiv.onmouseover = function() {AutoComplete_HighlightItem(			__AutoComplete[id]['element'].getAttribute('id'), this.			getAttribute('index'));}		newDiv.onclick     = function() {AutoComplete_SetValue(			__AutoComplete[id]['element'].getAttribute('id')		); AutoComplete_HideDropdown(__AutoComplete[id]['element'].			getAttribute('id'));}		text   = (toDisplay[i])?toDisplay[i]:" ";		newDiv.innerHTML = text;		__AutoComplete[id]['dropdown'].appendChild(newDiv);	}	// Too many items?	if (toDisplay.length > __AutoComplete[id]['maxitems']) {		__AutoComplete[id]['dropdown'].style.height = (__AutoComplete[id]			['maxitems'] * 15) + 2 + 'px';	} else {		__AutoComplete[id]['dropdown'].style.height = '';	}	/**	* Set left/top in case of document movement/scroll/window resize etc	*/	__AutoComplete[id]['dropdown'].style.left = AutoComplete_GetLeft(		__AutoComplete[id]['element']	);	__AutoComplete[id]['dropdown'].style.top  = AutoComplete_GetTop(		__AutoComplete[id]['element']	) + __AutoComplete[id]['element'].offsetHeight;	// Show the iframe for IE	if (isIE) {		__AutoComplete[id]['iframe'].style.top    = __AutoComplete[id]			['dropdown'].style.top;		__AutoComplete[id]['iframe'].style.left   = __AutoComplete[id]			['dropdown'].style.left;		__AutoComplete[id]['iframe'].style.width  = __AutoComplete[id]			['dropdown'].offsetWidth;		__AutoComplete[id]['iframe'].style.height = __AutoComplete[id]			['dropdown'].offsetHeight;		__AutoComplete[id]['iframe'].style.visibility = 'visible';	}	// Show dropdown	if (!__AutoComplete[id]['isVisible']) {		__AutoComplete[id]['dropdown'].style.visibility = 'visible';		__AutoComplete[id]['isVisible'] = true;	}	// If now showing less items than before, reset the highlighted value	if (__AutoComplete[id]['dropdown'].childNodes.length != numItems) {		__AutoComplete[id]['highlighted'] = null;	}}

warning displayed:

Warning: Error in parsing value for 'top'.  Declaration dropped.Source File: http://www.intellisource.co.za/test_8347379386/?p=3Line: 0

i understand that these are css errors, but how could i find out why the 'top' decleration is not being allowed? 0othere are no strings shown, but css values are set in the function above. the only browser compatibility this site needs to have is firefox, as this is the administration website.

[boen_robot]

Get yourself Firebug. It should let you see the value of "top". The value is something invalid, and that's why it's dropped.

[dsonesuk]

might be because you have not included +"px"; at endoffsetHeight+"px";

[Greywacke]

i've got firebug 1.5.4 but i couldn't seem to find a reference on how to use it, and where to look for the errors. :)there was a mistake where the onmouseover event is set for the list values, there was a ; at the end - and i am not used to coding events like that. i will look into the offsetHeight.

[Greywacke]

thanks dsoneuk,it was not exactly offsetHeight though that was causing the warning, i added + 'px' in everywhere where it was expected (where the css values for the dimentional and positioning are set), and those warnings are gone :)as i said this is not originally my code... :)issue has now been RESOLVED!