Opera 9 and ':first-letter'

Back to October 2006

Table of contents

  1. 'first-letter' as an inline element
  2. ':first-letter' as a block-level element
  3. ':first-letter' as a floated block-level element
  4. Same as above, but with a dimension
  5. Same as above, but with margins
  6. Same as above, but with 'display: inline-block'
  7. Conclusion: an equal difference

1. ':first-letter' as an inline element

Ibam forte via sacra sicut meus est mos, nescio quid meditans nugarum totus in illis. Accurrit quidam notus mihi nomine tantum, arreptaque manu "Quid agis, dulcissime rerum?".

CSS code

p.line:first-letter {
display: inline;
font-size: 3em;
color: maroon;
background: transparent;
line-height: normal;
}

Comments

One of our references is Internet Explorer 6 for Windows, just because Internet Explorer 5 doesn't support ':first-letter'. In this first example, the only difference between Opera 9 and the other browsers (e.g Firefox 1.5) lies in the 'line-height' calculations.

2. ':first-letter' as a block-level element

Ibam forte via sacra sicut meus est mos, nescio quid meditans nugarum totus in illis. Accurrit quidam notus mihi nomine tantum, arreptaque manu "Quid agis, dulcissime rerum?".

CSS code

p.block:first-letter {
display: block;
font-size: 3em;
color: maroon;
background: transparent;
line-height: normal;
}

Comments

The pseudo-element is formatted like an inline element, despite the explicit declaration of 'display: block'. In this example, the only difference between Opera 9 and the other browsers (e.g. Firefox 1.5) lies in the 'line-height' calculations.

3. ':first-letter' as a floated block-level element

Ibam forte via sacra sicut meus est mos, nescio quid meditans nugarum totus in illis. Accurrit quidam notus mihi nomine tantum, arreptaque manu "Quid agis, dulcissime rerum?". Ibam forte via sacra sicut meus est mos, nescio quid meditans nugarum totus in illis. Accurrit quidam notus mihi nomine tantum, arreptaque manu "Quid agis, dulcissime rerum?".

CSS code

p.floatblock:first-letter {
display: block;
font-size: 3em;
color: maroon;
background: transparent;
line-height: normal;
float: left;
}

@media all and (min-width: 0px) {
body > p.floatblock:first-letter {
margin-top: -0.2em;
}
}

Comments

This example (a drop-cap) looks similar in all browsers except for Opera 9, which aligns the letter lower than the others. This is not an error, of course. To gain a certain similarity, we need the filter marked in blue. Note that an explicit dimension for the floating pseudo-element has not been declared.

4. Same as above, but with a dimension

Ibam forte via sacra sicut meus est mos, nescio quid meditans nugarum totus in illis. Accurrit quidam notus mihi nomine tantum, arreptaque manu "Quid agis, dulcissime rerum?". Ibam forte via sacra sicut meus est mos, nescio quid meditans nugarum totus in illis. Accurrit quidam notus mihi nomine tantum, arreptaque manu "Quid agis, dulcissime rerum?".

CSS code

p.floatblock2:first-letter {
display: block;
font-size: 3em;
width: 2em;
color: maroon;
background: transparent;
line-height: normal;
float: left;
}

@media all and (min-width: 0px) {
body > p.floatblock2:first-letter {
margin-top: -0.2em;
}
}

Comments

This example looks similar in all browsers except for Opera 9, which aligns the letter lower than the others. To gain a certain similarity, we need the filter marked in blue. Note that an explicit dimension for the floating pseudo-element has been declared.

5. Same as above, but with margins

Ibam forte via sacra sicut meus est mos, nescio quid meditans nugarum totus in illis. Accurrit quidam notus mihi nomine tantum, arreptaque manu "Quid agis, dulcissime rerum?". Ibam forte via sacra sicut meus est mos, nescio quid meditans nugarum totus in illis. Accurrit quidam notus mihi nomine tantum, arreptaque manu "Quid agis, dulcissime rerum?".

CSS code

p.floatblock3:first-letter {
display: block;
font-size: 3em;
width: 2em;
color: maroon;
background: transparent;
line-height: normal;
float: left;
margin: 0 .2em .2em 0;
}

@media all and (min-width: 0px) {
body > p.floatblock3:first-letter {
margin-top: -0.2em;
}
}

Comments

This example looks similar in all browsers except for Opera 9, which aligns the letter lower than the others. To gain a certain similarity, we need the filter marked in blue. Note that an explicit dimension for the floating pseudo-element has been declared, plus an explicit margins declaration.

6. Same as above, but with 'display: inline-block'

Ibam forte via sacra sicut meus est mos, nescio quid meditans nugarum totus in illis. Accurrit quidam notus mihi nomine tantum, arreptaque manu "Quid agis, dulcissime rerum?". Ibam forte via sacra sicut meus est mos, nescio quid meditans nugarum totus in illis. Accurrit quidam notus mihi nomine tantum, arreptaque manu "Quid agis, dulcissime rerum?".

CSS code

p.floatblock4:first-letter {
display: inline-block;
font-size: 3em;
width: 2em;
color: maroon;
background: transparent;
line-height: normal;
float: left;
margin: 0 .2em .2em 0;
}

@media all and (min-width: 0px) {
body > p.floatblock4:first-letter {
margin-top: -0.2em;
}
}

Comments

This example looks similar in all browsers except for Opera 9, which aligns the letter lower than the others. To gain a certain similarity, we need the filter marked in blue. Note that an explicit dimension for the floating pseudo-element has been declared, plus an explicit margins declaration. Here the declaration 'display: inline-block' has been added.

7. Conclusion: an equal difference

The difference here lies in a simple idea about the positioning of a floated pseudo-element. Nothing less, nothing more. The bug's scent is not here.