4

I am adjusting the height of a couple of DIVs with contenteditable = true to fix box model issues when in IE Quirksmode.

The style of the DIVs are:

height: 14px;
padding: 6px;
border: 1px solid black;
overflow: hidden;

So far I've been fetching the CSS height value using $("selector").css("height") and used that value for further calculations, but recently updated my jQuery library to the newest version and this method is now broken.

To elaborate; in jQuery 1.4.2 .css("height") would return '14px' whereas jQuery 1.6.2 returns '0px' if the element and all of its ancestors are visible and otherwise '14px'.

I'm guessing the former is calculated using IE Quirksmode box model (14px height - 2x 6px padding - 2x 1px border = 0px) and the latter is grabbed directly from the stylesheet. I would like to get the former regardless of visibility - is there any "pretty" way to get the actual CSS value ("pretty" meaning not looking it up in the document.styleSheets array)?

Edit:

First off, I forgot an important style property on the DIVs: overflow: hidden (now corrected).

Also I think it is worth to emphasize, this problem only occurs in Internet Explorer while in Quirks Mode. As far as I am aware it is not a problem in any other (current) browser/mode (I haven't tested all, so not 100% sure).

To further elaborate on the problem (and answer some suggestions on possible solutions) I ran a little test on the fields and the values returned by different functions in jQuery:

jQuery 1.4.2:

Element visible: true
.css('height'): 14px
.height(): 0
.outerHeight(): 14

Element visible: false
.css('height'): 14px
.height(): 0
.outerHeight(): 0

jQuery 1.6.2:

Element visible: true
.css('height'): 0
.height(): 0
.outerHeight(): 14

Element visible: false
.css('height'): 14px
.height(): 14
.outerHeight(): 28

.outerHeight(true) is of no use to me, as the margin has no effect regardless of box model. Element visibility was tested using $("selector").is(":visible").

Right, so how to use those numbers? To fix the box model height I have to do the following calculation:

newHeight = oldHeight + borderWidth (top & bottom) + padding (top & bottom)

In other words, I need the 14px value. One could argue that the solution to the problem is to grab the value of .outerHeight() when the element is visible while grabbing the value of .css('height') when it is not (which is what I am currently planning on doing), but that does not actually answer the original question; how do I get the actual CSS value?

For the sake of completeness, here is an example HTML/script that will replicate my numbers from the test (I did not do the actual test on this, but the end result is the same - also remember to set IE to Quirksmode before testing):

<!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">
    <head>
        <script src="http://code.jquery.com/jquery-1.6.2.js" type="text/javascript"></script>
        <style>
            .input {
                height: 14px;
                padding: 6px 8px;
                border: 1px solid black;
                overflow: hidden;
            }
            .hidden { display: none; }
        </style>
    </head>
    <body>
        <div><div class="input" contenteditable="true">test</div></div>
        <div class="hidden"><div class="input" contenteditable="true">test</div></div>
        <script type="text/javascript">
            $(document).ready(function(){
                var t = "";
                $(".input").each(function(){
                    t+= "visible: " + $(this).is(":visible") +"\n"  +
                            ".css('height'): " + $(this).css("height")+ "\n" +
                            ".height(): " + $(this).height()+ "\n" +
                            ".outerHeight(): " + $(this).outerHeight()+ "\n\n";

                });
                alert(t);
            });
        </script>
    </body>
</html>
Woodgnome
  • 2,281
  • 5
  • 28
  • 52
  • http://jsfiddle.net/pCHLB/ Seems like no problems. As I remember `css("height")` method does not calculate anything - it just show the value of corresponding CSS property. `height()` method does some calculation. – Igor Dymov Jul 18 '11 at 12:47
  • If that was true it would return the same value regardless of the element being hidden or not. – Woodgnome Jul 18 '11 at 13:36
  • http://jsfiddle.net/pCHLB/1/ - so it does – Igor Dymov Jul 18 '11 at 13:38
  • Are you entirely sure of that? At least I can't replicate result that do not differ depending on visibility. – Woodgnome Jul 18 '11 at 14:19

2 Answers2

4

Does :

$("selector").height();

or

$("selector").outerHeight();

fix your problem ?

ChristopheCVB
  • 7,269
  • 1
  • 29
  • 54
  • 1
    `outerHeight()` is more appropriate since it will also include border and padding. Pass `true` as the first argument to also include margins. – Salman A Jul 18 '11 at 12:49
  • 3
    Neither gets the actual CSS value though, so nah, still a problem. – Woodgnome Jul 18 '11 at 14:17
0

You can use .height() to get the actual height. Additionally, you can use .innerHeight() to get the element height including padding and .outerHeight() to get the height, padding, border and (optionally) margin.

Adam Hopkinson
  • 28,281
  • 7
  • 65
  • 99
  • Problem is those functions act up a bit weird when you're in IE Quirksmode depending on the visibility of the element in question. I elaborated further on the issue in my original question. – Woodgnome Jul 18 '11 at 14:23
  • I think by Quirksmode you mean compatibility mode, which can be turned off by setting `` – Adam Hopkinson Jul 18 '11 at 16:09
  • Nope, the Quirksmode when you open Internet Explorer Developer Tools and select Quirksmode in the Document Mode dropdown. I usually test out Quirksmode this way, to make sure things look always look correct. Sadly I have no control over the document type as the problem occurs in a script that is injected into different CMS's. – Woodgnome Jul 19 '11 at 09:15