SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    MSIE 7: clientHeight & offsetHeight do not reflect scripted CSS height property?

    I'm trying to implement a sliding menu using DOM/DHTML properties instead of a third party framework. My script initially sets the element's CSS height to "0px". In Firefox 3, this automatically sets the clientHeight and offsetHeight runtime properties to 0. In IE7, however, clientHeight and offsetHeight remain the same as scrollHeight. What gives?

  2. #2
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For that matter, it doesn't take into account inline style either. The maxHeight property doesn't do anything in IE7. WTF?

  3. #3
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For the record, I don't post here because I enjoy stumping the board. An occasional knowledgeable reply would be nice.

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    http://developer.mozilla.org/En/DOM:...t.offsetHeight
    http://developer.mozilla.org/En/DOM:....clienttHeight
    http://developer.mozilla.org/En/DOM:...t.scrollHeight

    clientHeight and offsetHeight include other stuff - they are not the same thing as the CSS height.

    If IE is doing something different, it might be because you're in quirks mode. There might be other CSS idiosyncrasies that are making IE7 behave differently, e.g. line-height or something else perhaps?

  5. #5
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    http://developer.mozilla.org/En/DOM:...t.offsetHeight
    http://developer.mozilla.org/En/DOM:....clienttHeight
    http://developer.mozilla.org/En/DOM:...t.scrollHeight

    clientHeight and offsetHeight include other stuff - they are not the same thing as the CSS height.

    If IE is doing something different, it might be because you're in quirks mode. There might be other CSS idiosyncrasies that are making IE7 behave differently, e.g. line-height or something else perhaps?
    Yes, I know they include the padding and border too. And I've already read those pages. My script works perfectly in Firefox. The test element is just a DIV with some text in it. No other markup or CSS styling.

    There is no doctype declaration in the test page. What (X)HTML version should I use to make this work the same way in IE and FF?

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Therein lies your problem, most likely. Without a DOCTYPE, quirks mode is triggered.

    If you had bothered to validate your page it would have told you you were missing a DOCTYPE. Validating your markup is good practice.

    I would personally go for a HTML 4.01 Strict DOCTYPE. For more info on HTML and XHTML (and why most people use XHTML badly), see the sticky at the top of the HTML/XHTML forum.

    Whatever you do, don't go for a Transitional doctype! They shouldn't be used any more.

  7. #7
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    Therein lies your problem, most likely. Without a DOCTYPE, quirks mode is triggered.

    If you had bothered to validate your page it would have told you you were missing a DOCTYPE. Validating your markup is good practice.

    I would personally go for a HTML 4.01 Strict DOCTYPE. For more info on HTML and XHTML (and why most people use XHTML badly), see the sticky at the top of the HTML/XHTML forum.

    Whatever you do, don't go for a Transitional doctype! They shouldn't be used any more.
    Thanks. I didn't bother to add a doctype because it was a crappy little page I cobbled together in fifteen seconds to test the script, not something that I intend to publish.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •