Home/ Questions/Q 7802115
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T01:09:50+00:00

I have a span tag floated to the left which for some reason moves

  • 0

I have a span tag floated to the left which for some reason moves up above the rest of the paragraph text and is actually cut off in ie8 and ie7. The text shows fine in ie9, but is shown above the rest of the text within the paragraph. The CSS for the span tag is:

.stat {
  font: 64px/100% @numbersFont;
  letter-spacing: -3px;
  color: @orange;
  float: left;
  margin: 0 15px 5px 0;
}

The html is:

<p>
  <span class="stat">10x</span>
One&nbsp;<a title="Fidelity® Charitable Gift Fund Volunteerism and Charitable Giving in 2009" href="http://www.fidelitycharitable.org/docs/Volunteerism-Charitable-Giving-2009-Executive-Summary.pdf" target="_blank">study on volunteerism</a>&nbsp;found “on average, those who have volunteered in the last 12 months donate ten times more money to charities than non-volunteers.”
</p>

Any thoughts on what would be causing the text to bump up like that?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It turns out the problem had to do with the font. For some reason when you load the “Bebas” font using @font-family both IE and Firefox don’t understand the real height of the font. I fixed this by using css to target Firefox and IE specifically. Not ideal, but it fixed the problem.

    Here is how I targeted IE and Firefox. HTML:

    <!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 9]>    <html class="ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 9]><!--> <html class="" <?php language_attributes(); ?>> <!--<![endif]-->

    CSS:

    @-moz-document url-prefix() {
  .stat {
     padding-top: 12px;
  }
}

.lt-ie9 .stat,
.ie9 .stat {
  line-height: 85px;
}
    • 0