jQuery, height, CSS & IE (Internet Explorer)

I'm forever having to worry about cross-browser compatibility issues with Internet Explorer (mostly IE6). Using jQuery helps with bross-browser issues, but sometimes IE won't render CSS exactly how you'd like it to, and this is certainly the case with the CSS height property.

Cross-Browser Compatibility

What does the height property do? The height property sets the height of an element. Simple right how could a browser get that wrong? ...

Background of the Height property:
The height property is supported in all major browsers. No versions of Internet Explorer (including IE8) support the property value "inherit". The height property can be calculated by the browser automatically, defined as a length (px, cm, etc) or defined as a percentage of the containing block.

jQuery & Cross-Browser Issues: (more often then not, IE issues)

I've found using jQuery helps saves hours of otherwise painful coding to get things looking great in all browsers. Even though IE6 is hovering around the 5% usage, clients are still requesting support for it and companies are largely still building website with support for IE6.

An Interesting height property issue:
Timby's Tech Talk has come across an interesting issue (and fix) which you can find here at jQuery IE CSS height issue.

Many CSS issues can creep up when doing web development. This one issue came across when Timby was trying to dynamically set the height of a div, dependent on the height of another div.

The original code included a jQuery call on document.ready which:
1) Set a variable (to capture the height of an element in the dom)
2) Assigned that height variable to some other some other elements in the dom

Pretty simple way to use jQuery to set the height of an element in the dom right? And because it's jQuery it should play nice with FireFox (check) and IE (nope, Fail!). Okay well we kind of expected some kinks to show up in Internet Explorer, particularly IE6, it's ancient.

The real trick here comes from how you calculate and set the height variables in javascript.

The .height() Method:
The .height() method is best used when you're doing a mathematical calculation (e.g it will return the number 400 not the string '400px').

The .css('height') Method:
The .css('height') method will return the string '400px' which as you'll find the hard way IE just doesn't do what you'd expect (or maybe we should have expected IE to act strange in the first place).

So the lesson learnt here is that IE can have issues with .css('height'), particularly if the element is larger then what's shown on the screen. The solution? Use .height() instead. Head over to Timby's blog if you want to see the code for the jQuery IE CSS height issue.