SIFR + <span> (other method using image doesn't work)

I have tried and searched this board many times, but I can't seem to make it so simple:

http://xs.to/xs.php?h=xs139&d=09201&f=menu676.gif

I want to make such a menu like this:

item 1 | point 2 | point 3 | .... etc.

"item 1" And pipe symbol "|" = sIFR rendered text

HTML:

<div id="menu"> item 1 <span class="pipe"> | </span> item 2 <span class="pipe"> | </span> </div>

      

        
        
        
      

    

This part is in my HTML at the very bottom:

<script type="text/javascript">

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" }); 
</script>

      

        
        
        
      

    

CSS

.sIFR-active .pipe {

visibility : hidden; line-height : 1em; margin-left : 5px; margin-right : 5 px;
} 
.sIFR-active #menu {

visibility : hidden; line-height : 1em;
} 

      

        
        
        
      

    

The problem is that "|" the character will be placed right at the end of the word with no spacing between (5px).

How I want it: item 1 [5px space] | [5px space] item 2

What I get: point 1 | point 2

ANOTHER METHOD:

If I try with an image, the image won't display at all. ("sIFR.fitExactly = true" was set in sifr-config)

What I mean by "image": instead of a pipe symbol, an image representing a pipe symbol.

HTML:

<div id="menu"> item 1 <img src=...> item 2 <img src=...> </div>

      

        
        
        
      

    

CSS

.sIFR-active #menu {

visibility : hidden; line-height : 1em;
} 

      

        
        
        
      

    

script: This part is in my HTML at the very bottom:

<script type="text/javascript">

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" }); 

</script>

      

        
        
        
      

    

Sorry for the messy code, but I hope you can figure it out.

(edit: have been using sIFR for a few days, simple header substitution with ratio works great, but the above is beating me up)