[jquery] Different height for firefox vs IE 6???

Hi all,

I am stuck with this, it gives two different heights. 0 for firefox (as expected) and 182 in IE 6??

	var currentHeight = jQuery("#dirCreate").height();
	alert("currentHeight: "+currentHeight);
	if(currentHeight === 0){

Code (markup):

Is height a known issue for jquery with IE 6, if so what is the solution?

regards

 

is height a method or a property of the element? if FF returns 0, it follows that it's not a method but a property set by the browser.

i dont do jquery but in mootools, i can do element.getSize().y; or element.getStyle("height");

seems that you need the dimension plugin: http://plugins.jquery.com/project/dimensions

jquery sucks.

 

tx dimitar,

i tried to stick to jquery. with the plugin it seems to show all heights of every div correctly except for div dirCreate aarggh.

i have checked the code and the height seems to be used in 2 occassions so i hardcoded the height and replace it with 0.

function createDirectory(){
	closeFile();
	jQuery("#responseDir").css({display:"none"});

	var currentHeight =  $('#dirCreate').height();
	/*currentHeight = currentHeight.split("px")[0];*/
	alert("currentHeight new: "+currentHeight);
	currentHeight = (currentHeight == 182) ? 0 : currentHeight;/*nasty hack for ie6 gives me 182*/
	if(currentHeight === 0){
		alert("here show us the panel if = 0 ");
		jQuery("#dirCreate").css({display:"block"}).animate({"height": jQuery(".fileSystemWrap").height()+"px"}, 500);
	}else{
		closeDir();
	}
}

Code (markup):

Still i like to know why i get 182 and 173 as height value in IE6?

 

erm, most likely, css bleeding. have you tried doing a general reset as a test?

/*Elements CSS Framework by Ben Henschel*/
/*Mass Reset*/
/*Thanks to Eric for this reset http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/ */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	font-size:100%;
	vertical-align: baseline;
}
	
a img {border:none;}

table {border-collapse: collapse; border-spacing: 0;}
q:before, q:after, blockquote:before, blockquote:after {content: "";}

PHP:

i realise this late into your project such a rest may cock things up a little. but import it anyway and then compare the sizes - if the fault was the difference in reported with/height due to inherited padding and margins, then this ought to give you equal results.

another thing to try is the plugin i mentioned's outer height method->
console.log(element.outerHeight());