Find out what the cause is of a certain calculated CSS style

Question

Hi all,

I have a <div> on a webpage which ends up with a calculated height property of 633px. This is not set in any cascading style sheet, inline or not, nor is it set in a javascript. I have searched everywhere in my code but the number 633 does not show up anywhere. I can solve this by setting style="height: 420px;" which is the height that I want, but IE seems to override this to the 633px that I would get in other browsers too by default. I have verified in both Google Chrome and Firefox/Firebug that the actual contents of the div are nowhere near 633 pixels high. Is there any way I can find out what the reason is for this calculated height? For completeness, here is what Google Chrome reports as the style properties of the <div>.

Computed Style
background-color: white;
display: block;
float: left;
height: 633px;
margin-left: 30px;
margin-top: 20px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 830px;

Inline Style Attribute
margin-left: 30px;
margin-top: 20px;

#overview
background-color: white;
float: left;
padding: 0px;
width: 830px;

#overview, #overviewempty
margin-top: 9px; (is crossed out)

div
display: block;

Thanks in advance.

Edit:

The div in questions contains two div's, one with one line of text in font-size: 16px;, and a div with a height of 367px.

Another edit:

Okay, so I figured out what's causing this. The second div that the main div contains, contains one image, and a div that's floating over the right of that image, using position: relative; top: -335px;. Internet Explorer keeps the space where this element would have been blank. Any way around that?

Final edit:

Solved it! I wrapped the contents of the floating div with position: relative in a second div with position: absolute, that gets rid of the whitespace under the main image :) Final HTML looks something like this:

<div id="overview">
  <div>Some text>
  <div>
    <img src="someImage.jpg">
    <div style="float: right; position: relative; top: -335px;">
      <div style="position: absolute; top: 0px; left: 0px; background-color: white; width: 365px;">
        Some floating contents
      </div>
    </div>
  </div>
</div>

Answer 1

The height of an element is usually determined by its content. Do you have 633px worth of text or other stuff in there?

The computed style doesn't necessarily come from any style sheet or javascript. It's just what the style ends up as after the rendering engine is finished calculating everything.

Answer 2

Install IE Developer Toolbar for Internet Explorer. It sometimes makes life much easier.

Answer 3

In the same vein as the IE Developer Toolbar, have a look at Firebug for Firefox.

That will tell you all of the styles that apply to an element, and show you which ones have been overridden.