0

I need to place the text over the black panel at the position I need. So here is my layout

<div class="wrap">
    <img src="img/portfolio/geometria/thumb.jpg" alt="Geometria.ru" title="Geometria.ru" width="360" height="240">
    <div class="description">Приложение для <b>Geometria.ru</b></div>
</div>

.description {
    font-size: 20px;
    font-family: "Calibri Light", "Calibri", sans-serif;

    padding-top: 11px;
    padding-bottom: 7px;
}

.description b {
    font-size: 24px;
    font-family: "Calibri Bold", "Calibri", sans-serif;
    font-weight: normal;
}

The text in Firefox, Safari 7 (yes, I know it's on WebKit) and Chrome is almost the same (+/- 2px isn't a problem), but Opera render it completely weird. Can I handle this?

Line heights

Update

Chrome 32 on Windows render as bad as Opera do. On Mac OS all is ok.

efpies
  • 3,625
  • 6
  • 34
  • 45
  • How abt not using `line-height` at all. And just aligning the text with `margin` `padding`. – Anup Jan 24 '14 at 07:28
  • `.description { line-height: 24px; }` The problem is that b has a larger font-size than the other text within the .description div and opera is using a different vertical-align or something to that effect. You could also try modifying the vertical-align property of .description - that might work as well. Qwerks like this you kinda have to poke your way around until you find the attribute that has some effect – Cory Danielson Jan 24 '14 at 07:34
  • @Anup I don't use this property and try to align text just using paddings as you say. The result is this topic. – efpies Jan 24 '14 at 07:39
  • @CoryDanielson Actually Mozilla calculates `line-height` as `24.4167px`. So I apply this value or `24px` in Opera and nothing is changed. But if I apply bigger `line-height`, the text will move up, but proportions will be the same (and the text will still dive to bottom) – efpies Jan 24 '14 at 07:43
  • If all else fails, here's a last resort: remove the thin horizontal line from the image and give the text an `underline` property. – Mr Lister Jan 24 '14 at 12:51
  • By the way, I don't see any line-height in your code, but I do know that some browsers handle line-height on inline elements differently under certain circumstances. Make sure to apply line-height only to block elements. – Mr Lister Jan 24 '14 at 12:54

0 Answers0