title: sIFR + <span> (other method using image doens't work either)
body: <p>I tried many times and searched this board, but I can't do a simple thing like this:</p>
  
  <p><a href="http://xs.to/xs.php?h=xs139&amp;d=09201&amp;f=menu676.gif" rel="nofollow noreferrer">http://xs.to/xs.php?h=xs139&amp;d=09201&amp;f=menu676.gif</a></p>
  
  <p>I want to render a menu like this:</p>
  
  <p>item 1 | item 2 | item 3 | .... etc...</p>
  
  <p>"item 1" AND pipe character "|" = sIFR rendered text</p>
  
  <hr>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="menu"&gt; item 1 &lt;span class="pipe"&gt; | &lt;/span&gt; item 2 &lt;span class="pipe"&gt; | &lt;/span&gt; &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>This part is within my HTML at the very bottom:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  var metaroman2 = 
  
  { src: 'shared/sifr/metaroman2.swf' , ratios:[....7, 1.32....] }; 
  sIFR.activate(metaroman2);
  
  sIFR.replace(metaroman2, {
  
  selector: '#menu', css: ['.sIFR-root { background-color: #F9F9F9; color: #1F2956; font-weight:bold;}'], wmode: "transparent" }); 
  sIFR.replace(metaroman2, {
  
  selector: '.pipe', css: ['.sIFR-root { background-color: #F9F9F9; color: #1F2956;}'], wmode: "transparent" }); 
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <p>CSS:</p>
  
  <pre><code>.sIFR-active .pipe {
  
  visibility : hidden; line-height : 1em; margin-left : 5px; margin-right : 5 px;
  } 
  .sIFR-active #menu {
  
  visibility : hidden; line-height : 1em;
  } 
  </code></pre>
  
  <hr>
  
  <p>The problem is, that the "|" character is beeing put right at the end of the word with no spacing between (5px).</p>
  
  <p>How i want it:
  item 1 [5px space] | [5px space] item 2</p>
  
  <p>What i get:
  item 1|item 2</p>
  
  <p><strong>OTHER METHOD:</strong></p>
  
  <p>If I try it with an image, the image doesnt get displayed at all. ("sIFR.fitExactly = true" has been set in sifr-config) </p>
  
  <p>What I mean with "image": in stead of the pipe sign, an image which represents the pipe sign.</p>
  
  <hr>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="menu"&gt; item 1 &lt;img src=...&gt; item 2 &lt;img src=...&gt; &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>css:</p>
  
  <pre><code>.sIFR-active #menu {
  
  visibility : hidden; line-height : 1em;
  } 
  </code></pre>
  
  <hr>
  
  <p>script:
  This part is within my HTML at the very bottom:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  var metaroman2 = 
  
  { src: 'shared/sifr/metaroman2.swf' , ratios:[....7, 1.32....] }; 
  sIFR.activate(metaroman2);
  
  sIFR.replace(metaroman2, {
  
  selector: '#menu', css: ['.sIFR-root { background-color: #F9F9F9; color: #1F2956; font-weight:bold;}'], wmode: "transparent" }); 
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm sorry for the messy code, but I hope you can make some sense of it.</p>
  
  <p>(edit: have been using sIFR for a few days, simple heading replacing with ratio's work perfectly but the above is beating me up)</p>