Mark Needham

Thoughts on Software Development

jQuery datepicker IE6 positioning bug

with 9 comments

We’ve been using the jQuery datepicker on my current project and came across some strange behaviour with regards to the positioning of the calendar in IE6.

The calendar was always positioning itself right at the top of the screen instead of just below the textbox it was hooked up to but in Firefox it was working fine.

After a bit of exploration in the jQuery code (ui.datepicker.js) we worked out that the ‘document.documentElement.clientHeight’ call in the ‘_checkOffset’ function was always returning a value of 0 meaning that the position of the calendar was always right at the top of the screen.

_checkOffset: function(inst, offset, isFixed) {
		var pos = inst.input ? this._findPos(inst.input[0]) : null;
		var browserWidth = window.innerWidth || document.documentElement.clientWidth;
		var browserHeight = window.innerHeight || document.documentElement.clientHeight;
...

It turned that we were missing the doctype at the top of the HTML page which make the page standards compliant and as a result document.documentElement.clientHeight returns the proper height.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Not having this set puts IE into Quirks Mode meaning that document.documentElement.clientHeight always returns 0.

We found a post on the Webmaster World Forum which helps explain why this change makes a difference.

Be Sociable, Share!

Written by Mark Needham

January 6th, 2009 at 9:57 pm

Posted in jQuery

Tagged with ,

  • Jason

    Thanks for this Mark!. Sure did save me a lot of time debugging.

  • JK

    Declaring the XML type (i.e., ) will also trigger Quirks mode.

  • JK

    Shit..
    Declaring the XML type (i.e., <?xml version=”1.0″ encoding=”ISO-8859-1″?>) will also trigger Quirks mode.

  • max

    thnx Mark good work !!

  • Viraj Shetty

    Thanks !! Was very useful.

  • Tannpv

    Thanks

  • Lloyd Hasson

    Thanks.  Very helpful.

  • Moncef

    Thanks.

  • Moncef

    Thanks Mark.