R – sifr “shrinking” font-size

sifr

i'm having some trouble with the font size using sifr2, when the text is too big to fit a single "line", instead of a line break (as it happens in the demo html files provided with sifr2 with the text "Vanden Keere, Mrs. Eaves wed in Baskerville"), it justs shrinks the sifr-replaced text to a smaller font-size, in order to fit the space, the weird thing, is that i'm not using sizes for this css tag.

The "problematic" selector is h2.text, located into a class="bloq" DIV.

<div class="bloq">
    <h2 class="text">text that drives me crazy 'cos it's soooo long</h2>
</div>

Here's the code:

SIFR code:

// This is the preferred "named argument" syntax
sIFR.replaceElement(named({sSelector:"h2.text", sFlashSrc:swfurl, sColor:"#7d2384", sLinkColor:"#000000", sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:0, nPaddingRight:0, nPaddingBottom:0, nPaddingLeft:0, sWmode:"transparent"  }));

SIFR.screen CSS CODE:

.sIFR-hasFlash h2.text {
    visibility: hidden;
    letter-spacing: -9px;
    font-size: 14px;
}

mystyle CSS CODE:

h2{
    height: 62px;
    background-repeat: no-repeat;
    background-position: bottom left;
    text-indent: -9999px;
    padding: 0px;
    display: block;
}


h2.text{
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
    font-size: 12px;
    color: #7d2384;
    margin-bottom: 10px;
    text-indent: 0px;
    height: auto;
}


.bloq{padding-left: 11px; float: left; width: 300px;}

Thanks in advance.

PS. Also, i've noticed that in the latest Safari version, there's some trouble with the sBgColor:"#FFFFFF" property, sColor:"#7d2384" works good, but sBgColor is always turned into green.

Too many browsers .. too many releases 😛

Best Answer

sIFR 3 does not have this issue.