sIFR 3 - can't style for color, weight, etc.

I'm trying to use sIFR 3. I am getting it to work and can do some styling, such as changing the font size. But if I try to change the color or weight, nothing changes. I don't understand what I'm doing that allows some styling to work, and some not to.

My html is:

<html>
<head>
<title>Test sifr</title>
<link rel="stylesheet" href="sifr.css" type="text/css">
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>
</head>

<body>
Starting...<br>
<span class='testsifr'>Testing #2</span><br><br>
Finished.<br>
</body>
</html>

My sIFR-config.js is:

var gotham = { src: 'GothamMBLCond.swf' };

sIFR.activate(gotham);

sIFR.replace(gotham, {
  selector: 'span.testsifr'
  ,css: [
  'span.testsifr{ color:#0000FF; font-weight:bold;}'
  ]
});

My sIFR.js is:

@media screen {
  .sIFR-flash {
    visibility: visible !important;
    margin: 0;
    padding: 0;
  }

  .sIFR-replaced, .sIFR-ignore {
    visibility: visible !important;
  }

  .sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
  }

  .sIFR-replaced div.sIFR-fixfocus {
    margin: 0pt; 
    padding: 0pt; 
    overflow: auto; 
    letter-spacing: 0px; 
    float: none;
  }
}

@media print {
  .sIFR-flash {
    display    : none !important;
    height     : 0;
    width      : 0;
    position   : absolute;
    overflow   : hidden;
  }

  .sIFR-alternate {
    visibility : visible !important;
    display    : block   !important;
    position   : static  !important;
    left       : auto    !important;
    top        : auto    !important;
    width      : auto    !important;
    height     : auto    !important;
  }
}

/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
@media screen {
  .sIFR-active span.testsifr {
    font-family: Verdana;
    visibility: hidden;
    font-size:48px;
    color:#0000FF;
    font-weight:bold;
  }
}

As I say, it renders fine, but in black, instead of blue, and at regular weight instead of bold. I know I instruct it to go blue/bold in both the .js and the .css files, but I have tried each place singularly, and get the same results. But I can change the size from 48px to other values, and the font-size change DOES take effect. Why won't my color & weight changes take effect? Any ideas?

Tom

ansaurus

tags:

views:

answers:

sIFR 3 - can't style for color, weight, etc.

related questions