Hi all,

this is happening to me both in firefox and explorer, and that makes me think I'm doing something wrong. But it's strange. I have this code:

HTML Code:
<div id="comments" class="section">
  <h2>A Title</h2>
  
  <p>Text here.</p>
</div>
The following CSS puts the h2 near the top of the div, as I intend.

Code:
#comments {
  border-top: 5px solid #ec9206;
}

#comments h2 {
  margin: 0.1em 0 0.5em;
}
However, since there are more places where I want to do this, I decided to create a new class (section):

Code:
div.section {
  border-top: 5px solid #ec9206;
}

div.section h2 {
  margin: 0.1em 0 0.5em;
}
The margin-top setting does not work here (the other ones do). I could achieve what I want by setting line-height to 0, but this is an ugly, ugly hack.

CSS and HTML validate in both cases.

Any ideas about what I am doing wrong?

Cheers,

David