SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Location
    Wichita, KS, USA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Does IE6 still have a boxmodel problem in standards mode?

    I originally posted this over on the Sitepoint Web Page Design forum (http://www.sitepoint.com/forums/show...php?p=3729004). The CSS gurus over there seemed to think the problem might be related to the JavaScript in my code, and suggested I post here as well.

    I thought IE6 in standards mode was supposed to have a "correct" box model, but after several hours of trying to fix a silly bug in an application, I simplified the problem and still am not sure what to think.

    Here's a simple, validated page that verifies it's being rendered in standards mode, and then displays a table cell with preset width, padding and borders. Clicking on the cell reads its offsetHeight (read only value, which should include padding and borders), then sets the cell's height right back to that value. In Firefox, repeated clicking produces no changes...but in IE6 standards mode, the cell gets taller, and taller, and taller...[oddly enough] by the value of the summed padding and borders (10px top padding + 10px bottom padding + 2px top border + 2px bottom border = 24px).

    Am I losing it? I haven't had much luck locating information on this. Since originally posting on the other forum, I've also discovered that IE7 seems to do the same thing.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>boxmodel test for ie6 in standards mode</title>
    
    <style type="text/css">
    .testtd {
    	width: 200px;
      border:2px solid #333333;
      background-color: #CCCCCC;
    	padding: 10px;
    	cursor: pointer;
    }
    </style>
    
    <script type="text/javascript">
    alert("Compat mode is: " + document.compatMode);
    
    function setText(elm, text) {
    	elm.innerHTML = "offsetHeight is: " + text;
    }
    
    function adjustHeight() {
    	var td = document.getElementById("td");
    	var h = td.offsetHeight;
    	var newheight = h.toString() + "px";
    	td.style.height = newheight;
    	setText(td, newheight);
    }
    </script>
    
    </head>
    
    <body onload="setText(document.getElementById('td'), document.getElementById('td').offsetHeight.toString() + 'px');">
    
    <table>
    	<tr>
    		<td id="td" class="testtd" onclick="adjustHeight();">test text</td>
    	</tr>
    </table>
    
    </body>
    </html>
    Thoughts?

    Thanks,
    Tim

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    It seems to be a difference in line-height. Set that to 1.3 or 1.4 and they should be the same.

    The offsetHeight property measures from border to border by design. It's not part of any W3C specification or technical recommendation.
    DOM:element.offsetHeight

    I was able to troubleshoot the problem thanks to the sample stylesheet for HTML 4.0
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting.

    Firefox does the same as IE for other HTML elements (added div below table):
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>boxmodel test for ie6 in standards mode</title>
    <style type="text/css">
    .testtd {
    	width: 200px;
      border:2px solid #333333;
      background-color: #CCCCCC;
    	padding: 10px;
    	cursor: pointer;
    }
    </style>
    <script type="text/javascript">
    function setText(elm, text) {
    	elm.innerHTML = "offsetHeight is: " + text;
    }
    
    function adjustHeight(obj) {
    	var h = obj.offsetHeight;
    	var newheight = h.toString() + "px";
    	obj.style.height = newheight;
    	setText(obj, newheight);
    }
    </script>
    
    </head>
    
    <body onload="setText(document.getElementById('td'), document.getElementById('td').offsetHeight.toString() + 'px');">
    
    <table>
    	<tr>
    		<td id="td" class="testtd" onclick="adjustHeight(this);">test text</td>
    	</tr>
    </table>
    
    <div class="testtd" onclick="adjustHeight(this);">crap browser</div>
    
    </body>
    </html>

  4. #4
    SitePoint Member
    Join Date
    Sep 2007
    Location
    Wichita, KS, USA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah...you see my point. It IS interesting.

    It's not the lineheight, or anything else. However, your addition of the div got me to wondering, so I've simplified the code down to just CSS and a TD, and...FF2 messes it up. The CSS height is set to 50px, the width is set to 200px, which is plenty for the content to display without overflow. Add 24px for borders and margins, and we should get a final box of 74px x 224px. IE6 gets it right in standards mode; FF does not, displaying a 50px x 224px box. So apparently it's a FF problem. Googling on "firefox offsetheight" and similar phrases showed that many developers are having trouble with Firefox's CSS heights.

    So, is this a TD only problem? The div seems to be fine...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>boxmodel test for standards mode</title>
    
    <style type="text/css">
    #testtd {
      width: 200px;
      height: 50px;
      border:2px solid #333333;
      background-color: #CCCCCC;
      padding: 10px;
    }
    </style>
    
    <script type="text/javascript">
    alert("Compat mode is: " + document.compatMode);
    </script>
    
    </head>
    
    <body>
    <table>
      <tr>
        <td id="testtd">test text</td>
      </tr>
    </table>
    </body>
    </html>

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    the offsetHeight parameter is an old unsupported standard.

    What may help you here is http://www.quirksmode.org/dom/getstyles.html
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    offsetHeight is actually working the way it should.

    The reason that the div grows is the following:
    • offsetHeight will return the complete height, in this case; the height, border and padding
    • The complete height in this case is "height + border + padding". You retrieve that and set the height only. Meaning that the total height will be "(height + border + padding) + border + padding".


    So why doesn't the table cell grow in Firefox? Reason for this is that the box model for table cells is different (yiha). The height will "include" the padding even though in standards mode.

    Internet Explorer is not doing the correct thing here (surprise!) by making the table cell taller when setting the height. Lets just hope they fix this issue before I retire.

  7. #7
    SitePoint Member
    Join Date
    Sep 2007
    Location
    Wichita, KS, USA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria View Post
    offsetHeight is actually working the way it should.

    The reason that the div grows is the following:
    • offsetHeight will return the complete height, in this case; the height, border and padding
    • The complete height in this case is "height + border + padding". You retrieve that and set the height only. Meaning that the total height will be "(height + border + padding) + border + padding".
    I agree on this point. The script works as I expected, setting the content height equal to the combined height and thus the cell should grow. As far as I can tell, offsetHeight was never a part of any standard but is supported in most browsers. Its function doesn't seeem to be replaceable by any other function or combination of functions (i.e. retrieving the total height of an element).

    Quote Originally Posted by Pepejeria View Post
    So why doesn't the table cell grow in Firefox? Reason for this is that the box model for table cells is different (yiha). The height will "include" the padding even though in standards mode.
    I couldn't find any standards that clearly defined how height for TD cells is to be calculated. The best I could do was CSS2 defs that "suggested" that heights assigned to TDs be taken as a "minimum" height, which of course is silly since a TD can also have an overflow assignment. Do you have somewhere you can point me to that defines the box model specifically for TDs? I'm getting really curious about this one.

    Quote Originally Posted by Pepejeria View Post
    Internet Explorer is not doing the correct thing here (surprise!) by making the table cell taller when setting the height. Lets just hope they fix this issue before I retire.
    I'll have to disagree with you here...unless there's a published standard on calculating TD offsetHeights differently than TD offsetWidths, IE6/7 does exactly what I would expect given the "normal" box model. I've attached another code snippet below that clearly shows that FF (and most other browsers) calculates offsetWidth for a TD the "normal" way...i.e. the table cell grows in width when clicked, but not in height. At least IE is consistent. However, testing via browsercam indicated that IE is the only browser that calculates the offsetHeight this way for a TD. If there is a standard for TD offsetHeight that differs from offsetWidth, then there's no way to discover the entire height of a TD element via the DOM.

    I normally don't get sucked into fun things like this, but the particular application I'm working on requires the display of large amounts of information in a small space...and being in a corporate environment where only IE6 and FF2 are used, I figured that browser inconsistencies were a thing of the past for me.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>boxmodel test for ie6 in standards mode</title>
    
    <style type="text/css">
    #testtd, #testdiv {
      width: 200px;
      height: 50px;
      border:2px solid #333333;
      background-color: #CCCCCC;
      padding: 10px;
      cursor: pointer;
    }
    #testtdtextout, #testdivtextout {
      margin-top: 10px;
      margin-bottom: 40px;
    }
    </style>
    
    <script type="text/javascript">
    var elements = new Array("testtd", "testdiv");
    
    function setText() {
      for (var elidx in elements) {
        var el = document.getElementById(elements[elidx]);
        var el_height = el.style.height;
        var el_width = el.style.width;
        var el_offsetheight = el.offsetHeight;
        var el_offsetwidth = el.offsetWidth;
        var el_textout = document.getElementById(elements[elidx] + "textout");
        el_textout.innerHTML = "Compat mode is: " + document.compatMode + "<br />height: [" + el_height + "]; width: [" + el_width + "]; offsetHeight: [" + el_offsetheight + "]; offsetWidth: [" + el_offsetwidth + "]";
      }
    }
    
    function adjustHeights() {
      for (var elidx in elements) {
        var el = document.getElementById(elements[elidx]);
        var el_newheight = el.offsetHeight.toString() + "px";
        var el_newwidth = el.offsetWidth.toString() + "px";
        el.style.height = el_newheight;
        el.style.width = el_newwidth;
        setText();
      }
    }
    </script>
    
    </head>
    
    <body onload="setText();">
    
    <table>
      <tr>
        <td id="testtd" onclick="adjustHeights();">test text</td>
      </tr>
    </table>
    <div id="testtdtextout">&nbsp;</div>
    
    <div id="testdiv" onclick="adjustHeights();">test text</div>
    <div id="testdivtextout">&nbsp;</div>
    
    </body>
    </html>

  8. #8
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I seriously doubt that IE is doing the correct thing here. IE doesn't even know what display table-cell is (scrolll down to "17.2 The CSS table model"). Instead IE incorrectly says that a table cell is a block element. This has been addressed in IE 8 (Acid 2 uses this, and they claim they pass the test).

    About a table cell height, I found this: "In CSS 2.1, the height of a cell box is the maximum of the table cell's 'height' property and the minimum height required by the content (MIN)."

  9. #9
    SitePoint Member
    Join Date
    Mar 2008
    Location
    New Lisbon, WI
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    So, has anyone ever come across a fix / hack to deal with this discrepancy between IE and Firefox?

  10. #10
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You will have to sniff for IE (sadly). See the bullet point above that I wrote how things are different.

  11. #11
    SitePoint Member
    Join Date
    Sep 2007
    Location
    Wichita, KS, USA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep...solution for me was to do a browser sniff for IE and recalc my sizes by subtracting the border widths. Not too happy about that, but I still think IE is working more consistently than other browsers given the different interpretation of the box model.

    I think Joel hit the nail on the head with his recent article (http://www.joelonsoftware.com/items/...3/17.html)...I agree with him entirely. When standards are loosely defined, you can't say any particular browser is better than another...there's no real way to test them objectively.

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which won't always work, especially for those who use browsers that mask their true identity by either masking themselves as IE or outright claiming to be IE (Opera, I'm looking at you).

  13. #13
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can always check for opera using window.opera. Also, Opera stopped having MSIE in their userAgent since version 9 I think.


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
  •