jQuery outerHeight returning incorrect value IE

Question

I am attempting to get the height of an element on a page. I get the expected value (700px or so) in FF and Webkit on Mac, but I am getting a value of 0 in IE8. I haven't tried earlier versions of IE yet.

html:

<section>
  <article>
   ...
  </article>

javascript:

var height = myElement.outerHeight(true);

There are a number of things that could be complicating this.

1. I'm trying to measure the element immediately after it is dynamically added to the page (the element is added as the result of an ajax request),
2. the element I am trying to measure is an html5 element (section).

One thing I've noticed is that the inserted html5 elements are poorly formatted when viewed using developer tools. I get things like </article/>. Anything that was part of the page when it loaded looks fine.

Some things I've tried in attempting to solve the problem:

1. I've added css to apply display:block to all html5 elements
2. I've added Remy Sharp's "html5 enabling script" (http://remysharp.com/2009/01/07/html5-enabling-script/)
3. I'm using
4. I've tried using all divs instead of html5 elements
5. myElement.height() returns a value of 'auto' in IE8 whereas in other browsers I get a pixel value. innerHeight() returns null.

Thanks

Answer 1

IE8 simply doesn't support these elements...though it tries to render them correctly, a number of functions won't return correctly including dimensions.

This is just a difference between browsers that support the elements and browsers that pre-date them, you can try your luck with some HTML5 support libraries such as HTML5 Shiv, that's your best bet here.

Answer 2

One thing I've noticed is that the inserted html5 elements are poorly formatted when viewed using developer tools. I get things like </article/>

That's not poor formatting, that's the developer tools telling you exactly what the IE DOM looks like. It's IE failing to parse the HTML5 elements properly that results in the elements not being where you expect them, and consequently the height and rendering not matching what you expect.

What happens is that IE treats unknown elements as always being elements with the EMPTY content model: elements like <img/> or <br/> that never have a close-tag (requiring the self-closing syntax in XHTML). So when IE sees <section>, it creates and closes a section element. Then the next element, <article>, comes after the <section/> and not inside it. When IE sees </section> it thinks it's not a close-tag but an empty tag whose name is /section (which is of course quite invalid, but then when has IE cared about that?).

So the height of the <section/> element, which contains nothing, will likely be zero, and if you put a background on it that background won't encompass the <article/>.

As Nick mentioned, the html5shiv can fix some of these problems by using createElement to temporarily trick IE into thinking it knows that <section> is a real element. This doesn't really cover the entire problem, though, as when you start mucking around with further parse operations like setting innerHTML, it'll go wrong again. The next stage is to try to work around this with the innershiv; there are some performance disadvantages to this so make sure you only use it on IE, and only when you need to (it's not as robust as jQuery's html() interface).

Personally I don't see much benefit to all this hassle. For now, <section/> doesn't really get you anything that <div class="section"> doesn't. In the future, there may be tools that can do something with the semantics, and making sites look completely right in IE6-8 won't matter. But that day's a long way off IMO.