Home/ Questions/Q 7196749
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T20:50:14+00:00

I have problem with calculating span height in IE7 document mode. To be precise,

  • 0

I have problem with calculating span height in IE7 document mode. To be precise, div embedded in span returns different height depending on IE version.

Code (jquery 1.4.2, also tested on newer versions):
$('#sys_MainPage').height()

returns cca. 260 in Chrome, Firefox and IE 8/9. When I activate IE7 document mode code return 863?
Here is document structure with relevant attributes.
IE7: 

----SPAN:sys_MainPage
    height=863
    innerHeight=863
    outerHeight=863
    cssHeight=auto
    position=static
    overflow=visible
--------DIV:UgovoriCopy
        height=853
        innerHeight=863
        outerHeight=863
        cssHeight=99%
        position=static
        overflow=auto
------------DIV:GridViewUgovorGridWrapper
            height=862
            innerHeight=862
            outerHeight=862
            cssHeight=100%
            position=absolute
            overflow=visible
----------------TABLE:GridViewUgovorGrid
                height=142
                innerHeight=142
                outerHeight=144
                cssHeight=auto
                position=static
                overflow=visible
----------------SCRIPT:dxss_1127065360
                height=0
                innerHeight=0
                outerHeight=0
                cssHeight=auto
                position=static
                overflow=visible

IE9: 

----SPAN:sys_MainPage
    height=10
    innerHeight=10
    outerHeight=10
    cssHeight=auto
    position=static
    overflow=visible
--------DIV:UgovoriCopy
        height=0
        innerHeight=10
        outerHeight=10
        cssHeight=99%
        position=static
        overflow=auto
------------DIV:GridViewUgovorGridWrapper
            height=866
            innerHeight=866
            outerHeight=866
            cssHeight=100%
            position=absolute
            overflow=visible
----------------TABLE:GridViewUgovorGrid
                height=765
                innerHeight=765
                outerHeight=765
                cssHeight=765.44px
                position=static
                overflow=visible
----------------SCRIPT:dxss_1127065360
                height=381
                innerHeight=381
                outerHeight=381
                cssHeight=auto
                position=static
                overflow=visible

EDIT:
I solved this by removing UgovoriCopy css height (was 99%). But I would still like to know why was that a problem in IE7 document mode.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First of all placing a block level element(div) inside an inline element(span) is invalid.
    Secondly the browsers above IE7 and other browsers like FF, chrome and safari have a better rendering engine and intuitively handle buggy markup.

    As for the css property of height:99%, I think in IE7 as it invalidates the markup and doesn’t know how to handle it properly, it extends the div by 99% and as the span tag is enclosing the div it behaves the same too.
    Whereas in other browsers like FF, chrome even though the markup is invalid they handle it intuitively as even though the div has 99% and is a block element but its parent(span) is a inline element it occupies the height based on the amount of the content(behaves correctly) and return proper height

    • 0