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;