R – Parts of word gets pushed to next line (sifr3-r436)

sifr

When reloading the page, sometimes <li>Dagbladet</li> is rendered with a linebreak before "t", so it looks like:

Dagblade
t

<li>DN</li> is always rendered as:

D
N

I´d like to list each list element to the right for the previous one.
It´s positioned as it should when I don´t activate sIFR3.

All tips on how to use sIFR3 with to achieve this is highly appreciated!
The list should look like this: 

 Aftenposten Dagbladet Verdens Gang DN 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>type-test</title>  
  <link rel="stylesheet" href="sifr/sifr.css" type="text/css">

  <script src="sifr/sifr.js" type="text/javascript"></script>

  <script type="text/javascript" charset="utf-8">
    var cochin = { src: '/sifr3-r436/demo/cochin.swf'}

    sIFR.activate(cochin);

    sIFR.replace(cochin, {
      selector: 'h1, h2, h3, h4, li',
      css: '.sIFR-root {    }'
    });

  </script>

  <style type="text/css" media="screen">
    ul li {
      list-style: none ;
      display: inline ;
    }    
  </style>

</head>

<body>

<p>
<ul>
  <li>Aftenposten</li>
  <li>Dagbladet</li>
  <li>Verdens Gang</li>
  <li>DN</li>
<ul>
</p>



</body>
</html>

Best Answer

sIFR uses the width of the original element to fit the Flash text into. In your case, the Flash text is wider than the original element, doesn't fit and instead breaks into a new line.

The solution is to add some letter-spacing (through a .sIFR-active selector) to make the HTML text wider just for sIFR. Then when the replacement happens there'll be enough space to fit the Flash text.

Related Topic