Search code examples
htmlcsscomputed-style

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

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>
Solution

  • Install IE Developer Toolbar for Internet Explorer. It sometimes makes life much easier. EDIT: New versions of IE contain developer tools by default, accessible by pressing F12.