Question

I’m trying to use sIFR to create a tag cloud effect for a homepage I’m working on. There are 4 lines of text, with various font sizes and font colours within each line.

I suspect sIFR purists would say this creates too many movie clips to be safe, but it really is the effect we’re looking for and it’s the best option we have which is good for SEO and will degrade gracefully. If we can get it working, that is…

The problem I’m having is that the colours, font sizes, etc. all display just fine, but there seems to be excessive padding around the text, creating the effect that the line-height is nearer 200% than 200% or 1 em. I’ve got it working OK in Internet Explorer 7 and some other browsers, but Firefox seems to be displaying everything all wrong!

Any ideas and help appreciated 😉

<h1 style='font-weight:600;'> <span class='titleleft'>Content </span> <span class='titleright'>Formula:</span> <span class='focussed'>Focused </span> <span class='creative'>creative </span> <span class='and'>and </span> <span class='targeted'>targeted </span> <span class='content'>content </span> <span class='for'>for </span> <span class='bluechip'>blue chip </span> <span class='global'>global </span> <span class='websites'>websites </span> <span class='and2'>and </span> <span class='intranets'>intranets. </span> <span class='wedeliver'>We deliver </span> <span class=success>success </span> <span class='witha'> with a </span> <span class='degree'>360 degree </span> <span class='approach'>approach to online</span><br /> <span class='communications'>communications.</span> </h1> 

Sample configuration line:

sIFR.replace(arial,  {selector: '#main_content_left_home>h1>span.titleleft'  ,css: '.sIFR-root { color: #000000; font-weight:bold;letter-spacing: -1;}'  ,tuneWidth: (+10) });  sIFR.fixWrap = false; sIFR.fitExactly = true; sIFR.useStyleCheck = false; sIFR.useDomLoaded = false; sIFR.preserveSingleWhitespace = true; sIFR.autoInitialize = true; sIFR.forceWidth = true; sIFR.repaintOnResize = true; 

Answer 1

Check whether the extra size is inside the Flash movie, or around it. In the latter case, you’ll have to resort to CSS tweaking.

In the former case, check out the tuneHeight / tuneWidth and offsetTop / offsetLeft arguments for sIFR.replace(). These let you change position of the text inside the Flash movie and let you change how much margin the Flash movie leaves around the text.

This is sometimes necessary because the dimensions of the text are reported incorrectly by Flash.