Complete sifr confusion sifr3 vs sifr2 config

Question

I'm having two major issues on my site:

1) A series of links is cutting off the left edges of the menu items and also seemingly transposing characters from other items in the list

2) I'm having a massive font-size jump: anything between 2em and 3.95em are identical in size, but the moment it steps above that the size jumps hugely.

I realise that I probably need to try offSetLeft for the first and to define the ratios for the second - I just can't seem to do either.

My problems stem from not being able to comprehend the instructions on the site when compared with the downloadable example.

For example, the downloadable example seems to use the 'new' preferred replaceElement method and doesn't inlude a config.js file.

All the instructions I've seen on how to make this work rely on the more 'traditional' method of setup and calling via the config file.

Unfortunately I don't seem to be able to get it working using the traditional method - I've only had success at displaying anything when using the example version.

I've tried using sifr-debug.js and have been unable to retrieve the ratios which I feel would fix #2.

I have no idea where to insert the 'offSetLeft' statement or how to use it within the new replaceElement method.

It's all complicated by being utilised within Joomla - tho I've not used the available plugin as it didn't work for me and was based on a previous version of sifr.

Here's the statement at the bottom of my body element:

<script type="text/javascript">
 //<![CDATA[
 /* Replacement calls. Please see documentation for more information. */

 if(typeof sIFR == "function"){
 // This is the preferred "named argument" syntax
  sIFR.replaceElement(named({sSelector:"ul.menu li", sFlashSrc:"<?php echo $this->baseurl ?>/templates/ambient/swf/karabine.swf",sColor:"#7c171b",sFlashVars: "leading=3", sWmode:"transparent"}));
  sIFR.replaceElement(named({sSelector:".categories h3", sFlashSrc:"<?php echo $this->baseurl ?>/templates/ambient/swf/joehand.swf",sColor:"#7c171b",sWmode:"transparent"}));
  sIFR.replaceElement(named({sSelector:".blog h1", sFlashSrc:"<?php echo $this->baseurl ?>/templates/ambient/swf/joehand.swf",sColor:"#7c171b",sWmode:"transparent"}));
 }
 //]]>
 </script>

I'm really tearing my hair out here, so any help would be hugely appreciated.

Answer 1

As you say in your question, you're confused between the sIFR 2 and sIFR 3 configuration. I can't really help with that — try starting from scratch with the latest sIFR 3 version.