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

[123GoToAndPlay]

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){

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

regards

[dimitar christoff]

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
Extends jQuery to provide dimension-centric methods for getting widths, heights, offsets and more.

jquery sucks. :D

[123GoToAndPlay]

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();
}
}


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

[dimitar christoff]

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: "";}


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());
Gets the offsetHeight (includes the border and padding by default) for the first matched element. This method works for both visible and hidden elements. The margin can be included by passing an options map with margin set to true. Optional margin option added in 1.1