IE 8 displaying dt and dd on the same line while firefox displays them on two different lines?

How can I get my list of dt and dd to be on two seperate lines like they are supposed to be in Firefox. IE 8 for some reason is putting them on the same line! Why?

Why doesn't clear:left work?

My doctype is DOCTYPE html 5

Good point - http://jsfiddle.net/4mAAL/

    <dl>
      <dt><h3 class="nocufon">Climate change levy (CCL)</h3></dt>
      <dd>A tax on energy usage introduced in 2001. It aims to provide an incentive to increase energy efficiency and reduce carbon emissions.</dd>

      <dt><h3 class="nocufon">CO2</h3></dt>
      <dd>Carbon dioxide is one of the so-called 'greenhouse gases'. Burning fossil fuels releases CO2 into the atmosphere, which is believed to be a major cause of climate change.</dd>

      <dt><h3 class="nocufon">Audit</h3></dt>
      <dd>An independent examination of how something works, for example, how a company produces CO2</dd>

      <dt><h3 class="nocufon">Benchmark</h3></dt>
      <dd>To compare your company's carbon emissions against similar other organisations to see how much work needs to be done.</dd>

      <dt><h3 class="nocufon">Carbon footprint</h3></dt>
      <dd>The total volume of carbon emissions produced by a company, organisation or individual.</dd>

      <dt><h3 class="nocufon">开发者_运维技巧;Carbon neutral</h3></dt>
      <dd>For a company, to have zero net carbon emissions (e.g. by using only renewable energy or through offsetting its emissions through the purchase of approved carbon credits).</dd>

      <dt><h3 class="nocufon">Carbon Trust</h3></dt>
      <dd>Body created by the government to help businesses and organisations reduce their carbon emissions. It also funds the development of low carbon technology.</dd>

      <dt><h3 class="nocufon">Carbon Trust Standard</h3></dt>
      <dd>Initiative that provides a robust and clear definition of good practice that can be used to judge a company's commitment to carbon reduction.</dd>

      <dt><h3 class="nocufon">Cause related marketing</h3></dt>
      <dd>To partner with a good cause as part of a marketing strategy, for example, donating a percentage of profits from products sold to a selected charity.</dd>

      <dt><h3 class="nocufon">Climate change</h3></dt>
      <dd>A commonly used phrase to describe the theory that pollution caused by humans, including carbon emissions, is damaging the earth's ecology.</dd>

      <dt><h3 class="nocufon">Climate change levy (CCL)</h3></dt>
      <dd>A tax on energy usage introduced in 2001. It aims to provide an incentive to increase energy efficiency and reduce carbon emissions.</dd>

      <dt><h3 class="nocufon">CSR</h3></dt>
      <dd>Corporate Social Responsibility is a form of self-regulation used by companies to take responsibility for their impact on people and the environment. This often feeds into marketing strategy.</dd>

    </dl>

have you tried addding clear:left; to the css controlling your dd?

edit:

#glossary dd {
  clear: left;
}

doesn't work because there is no #glossary on your page that i can find.

 dd { clear: left }

should work.

or you can give the dl that contains the def lists id="glossary" which will make your css markup work.

In your CSS, override the UA stylesheet:

dd, dt { display:block }

However, I suspect that the IE UA sheet does not cause them to be display:inline. Have you validated your HTML and CSS?

Your h3 headings are not inside the dt elements h3 elements are not permitted inside dt elements, and therefore your HTML is not valid. Essentially all bets are off as to expecting consistent behaviour between browsers, and you should start by making your HTML valid.