Css – sifr: Opera-Bug: Flash Object too wide

This is one way:

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

Here is another way to hide the text while avoiding the huge 9999 pixel box that the browser will create:

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

Alright, looks like the fact that there was a class assigned to the <a> inside each <h2> because I was enabling an edit-in-place function with Flutter.

When I removed the class on the <a>, the replacements came through just fine.

Still doesn't explain why moving the header div.SimpleSideNav ul.sf li sIFR replacement to the top of the sifr-config.js configurations made it work, but I'm not going to look a gift horse in the mouth.