after all afternoon trying to get this tutorial working, I'm angered that I cannot figure this out. The source code from the demo/index.html page is far more more advanced and complicated than the code in the above tutorial. This is demoralizing my esteem to graduate to intermediate levels of know-how.... *sigh*.
the sIFR .sef file pushes the div "Guts" down below the left sidebar in Safari & Firefox on a Mac. The subhead of Vigo Gunship 'Decorating the ..." is pushed below the tb shadower in the header, cutting off the botton half of the text, although the header remains on the top of page
When the page originally loads it's fine -- then there's a 'blink' and the page refreshes with the flash sIFR. That when the div "guts" is pushed below all the sidebars to the bottom of the screen -- making it appear that the text and graphics have disappeared.
Submitted by suswelter on Thu, 05/29/2008 - 03:25.
Sounds from other comments as if Mac users in particular are having problems making this work. It sounds a great tool, so could we please hear back from posters experiencing problems whether they have found a way through, and/or from Terri/Pariah about any updating of this article to overcome Mac issues.
"Never underestimate the power of a minority who cherish the vision of a just and gentle world" – Robert Bellah
In Safari, FireFox (both Mac and Win), and Camino I see the same problems you're seeing--the positioning issues "suswelter" described. They aren't caused by sIFR. Rather they're caused by the CSS positioning of certain elements (independent of the sIFR Flash objects).
The site used to detect the client browser and serve a CSS file modified for the specific user agent. Now, though, I don't see the browser detector running; the code is out of the site templates. I've got an e-mail into my friend who uses the site, informing him of the situation. I hope to dig into that site by this coming weekend and have it fixed for FireFox and Safari (again).
In the meantime, please take a look at my http://www.WorkflowCreative.com. It also uses sIFR (extensively), and is a good example of sIFR working cross browser (it's also proof that, yes, I really can code for all browsers :-). To see exactly what it's doing with sIFR, view the page source. You'll see that nearly all of the graphic-looking text is live sIFR replacements.
Sincerely,
Pariah S. Burke
Submitted by PariahSBurke on Wed, 06/04/2008 - 12:47.
Three months down track I am looking back at this article. I think I understand Pariah's explanation about why the RailMagnor site is misbehaving in Safari (I note it hasn't been fixed yet). And certainly WorkflowCreative.com doesn't display the same problem described by suswelter. But whereas with RailMagnor I can select the HTML text, even though it displays in a specialised font (in the way Pariah is describing in this article), all the special font headings on the WorkflowCreative site appear to be non-HTML (ie graphics). Where exactly is the selectable sIFR text on the WorkflowCreative site?
A "workaround" is always a "work around". Beating around the bushes (or killing flies with a machinegun) may get you where you want to go, but it is probably not the elegant way to do it.
If the object is text, it should stay text (not flash) it should be simple HTML text. Graphic design is important, but not if that affects accessibility and semantics.
This is a great way to get those little bits of style element into designs. Well written and very straightforward. Thanks for taking the time to put this together.
I'm stumped and frustrated...
after all afternoon trying to get this tutorial working, I'm angered that I cannot figure this out. The source code from the demo/index.html page is far more more advanced and complicated than the code in the above tutorial. This is demoralizing my esteem to graduate to intermediate levels of know-how.... *sigh*.
–t
Hang in there
At what point do things seem to go wrong?
Terri Stone
Check out the revised code in Step 5!
Hi thorg,
See if the updated code in Step 5 works better. Pariah wrote this how-to several weeks ago, and the builds have changed since then.
Let me know, OK?
Terri Stone
Editor in Chief, CreativePro.com
RailMagnor site bug
the sIFR .sef file pushes the div "Guts" down below the left sidebar in Safari & Firefox on a Mac. The subhead of Vigo Gunship 'Decorating the ..." is pushed below the tb shadower in the header, cutting off the botton half of the text, although the header remains on the top of page
When the page originally loads it's fine -- then there's a 'blink' and the page refreshes with the flash sIFR. That when the div "guts" is pushed below all the sidebars to the bottom of the screen -- making it appear that the text and graphics have disappeared.
Sounds like a great solution...
... but it's a mess on my MAC on Safari and Firefox. Pity!
Please Update Us!
Sounds from other comments as if Mac users in particular are having problems making this work. It sounds a great tool, so could we please hear back from posters experiencing problems whether they have found a way through, and/or from Terri/Pariah about any updating of this article to overcome Mac issues.
"Never underestimate the power of a minority who cherish the vision of a just and gentle world" – Robert Bellah
Looking into Mac-related isues
Hi everyone,
Pariah will be looking into the issues you've reported on. As soon as I have news, I'll post it here!
TerriStone
Editor in Chief, CreativePro.com
It's the site, not sIFR
Hi, everyone.
In Safari, FireFox (both Mac and Win), and Camino I see the same problems you're seeing--the positioning issues "suswelter" described. They aren't caused by sIFR. Rather they're caused by the CSS positioning of certain elements (independent of the sIFR Flash objects).
The site used to detect the client browser and serve a CSS file modified for the specific user agent. Now, though, I don't see the browser detector running; the code is out of the site templates. I've got an e-mail into my friend who uses the site, informing him of the situation. I hope to dig into that site by this coming weekend and have it fixed for FireFox and Safari (again).
In the meantime, please take a look at my http://www.WorkflowCreative.com. It also uses sIFR (extensively), and is a good example of sIFR working cross browser (it's also proof that, yes, I really can code for all browsers :-). To see exactly what it's doing with sIFR, view the page source. You'll see that nearly all of the graphic-looking text is live sIFR replacements.
Sincerely,
Pariah S. Burke
Updating . . .
Three months down track I am looking back at this article. I think I understand Pariah's explanation about why the RailMagnor site is misbehaving in Safari (I note it hasn't been fixed yet). And certainly WorkflowCreative.com doesn't display the same problem described by suswelter. But whereas with RailMagnor I can select the HTML text, even though it displays in a specialised font (in the way Pariah is describing in this article), all the special font headings on the WorkflowCreative site appear to be non-HTML (ie graphics). Where exactly is the selectable sIFR text on the WorkflowCreative site?
email
open website
An Alternative
An alternative to SIFR is fontmeup! works great, and its faster since it doesnt need flash!
need some help
I think I've got most of this covered, but I may have got a little lost when entering my css class/id/etc commands.
Currently in my template.css I have this:
#pillmenu li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
float: left;
display: block;
line-height: 30px;
padding: 0 8px 0 8px;
color: #ff6600;
text-decoration: none;
font-weight: normal;
//this is the section I'd like to change//
In my index php file I put in this:
//I've censored the URL in this example//
//<[CDATA[
var jamaistevie = {
src: 'sifr/flash/jamaistevie.swf'
};
sIFR.activate(jamaistevie);
sIFR.replace(jamaistevie, {
selector: '#pillmenu li a'
,css: [
'.sIFR-root { text-align: center; background-color: #ff6600; }'
,'a { text-decoration: none; }'
,'a:link { color: #ff6600; }'
,'a:hover { color: #ff6600; }'
]
});
//]]>
did I screw something up, any help would be great, this seems like a great product!
A workaround
A "workaround" is always a "work around". Beating around the bushes (or killing flies with a machinegun) may get you where you want to go, but it is probably not the elegant way to do it.
If the object is text, it should stay text (not flash) it should be simple HTML text. Graphic design is important, but not if that affects accessibility and semantics.
I have used sIFR once ... only once.
I am having some trouble at
I am having some trouble at step 5 , Configure the sIFR Text Style ?
Mobile phone in India
Nice Workaround
This is a great way to get those little bits of style element into designs. Well written and very straightforward. Thanks for taking the time to put this together.
Regards - Web Design Services
Don't use sIRF
sIFR is Flash and iPad/iPhone won't display it.
question
Does Flash show up on iPods/iPads, etc.? Will all browsers show the fonts properly?
Note that this article was written in 2008
Today, August 2011, Pariah Burke would not recommend sIFR for web fonts. But he wrote this article in 2008. Technology changes rapidly.
Terri Stone
Editor in Chief, CreativePro.com