sIFR + <span> (other method using image doens't work either)

Question

I tried many times and searched this board, but I can't do a simple thing like this:

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

I want to render a menu like this:

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

"item 1" AND pipe character "|" = sIFR rendered text

---

HTML:

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

---

This part is within 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 is beeing put 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: item 1|item 2

OTHER METHOD:

If I try it with an image, the image doesnt get displayed at all. ("sIFR.fitExactly = true" has been set in sifr-config)

What I mean with "image": in stead of the pipe sign, an image which represents the pipe sign.

---

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 within 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>

I'm sorry for the messy code, but I hope you can make some sense of it.

(edit: have been using sIFR for a few days, simple heading replacing with ratio's work perfectly but the above is beating me up)

Answer 1

wrap every menu item into separate element, and replace that with sIFR selector, don't replace pipes. wrap them into span and style only with CSS.

those replaced items and spans should all be floating block elements.

html:

<div id="menu"><a href="#">Item 1</a><span>|<span><a href="#">Item2</a>...

css:

#menu a , #menu span {
    display: block;
    float: left;
}