How to Embed MP3 Audio Files In Web Pages With Google or Yahoo! Flash Player

Using this method, you can paste the embed code into your post or page. In the next post, I’ll go into some detail about a neat way to use this method in your WordPress theme.

Wrap the Abs Pos div in a non-semantic div. like this:

<div class="abrakadabra"></div>
<div style="position:absolute;top:0;right:0;>Content inside Div</div>
<div class="abrakadabra"></div>

And there you have it! That will fix the disappearing div.

Oh, and this site rocks for fixing bugs in IE6: Ultimate IE6 Cheatsheet

Works in: Safari, Firefox, IE8

Doesn’t work in IE6, IE7. Degrades gracefully in both.

Let’s start with the blockquote

Now, as mentioned above, this style won’t work in IE7, which is commonly used, so we need to use a base styling for the blockquotes. Seen below:

blockquote {
 background:#F5F5F5 none repeat scroll 0 0;
 border-left:8px solid #CCCCCC;
 border-right:1px dotted #CCCCCC;
 font-family:georgia,serif;
 margin-bottom:12px;
 margin-left:10px;
 margin-right:10px;
 padding:12px;
}

So, now we have a nice looking blockquote styling that looks like this:

Now let’s bring out the big guns (so to speak)

Now we’ll use the :before and :after psuedo classes to add the open and close quotes to the blockquotes.

blockquote p:before {
 content:url(images/quote-left.gif);
 margin-right:10px;
 text-align:left;
 opacity:0.3;
}

And, the :after psuedo class:

blockquote p:after {
 content:url(images/quote-right.gif);
 display:block;
 margin-top:-16px;
 text-align:right;
 opacity:0.3;
}

Now you have something that looks like this:

That’s it, all done. Hope that was helpful.

Also, If you want the quote .gifs I used, download them here.

ED: I used “opacity” here to fade the image to 30% opacity, but this isn’t recognized properly in IE, so if I wanted to do it right, I’d need to save the original file at 30% black, in order to make it look the same in all browsers. I’ll do that later though. I’m feeling lazy today.

Here’s the bottom line.

If you want to easily incorporate SIFR into your wordpress site, use the following:

WP-sIFR Plugin + dafont.com TTF + sIFR Generator = Sweet Effects

Instructions for Sweetness:

1. Download the WP sIFR plugin using the link above, using FTP drop it in the /wp-content/plugins directory on your site.
2. Activate the plugin
3. Find a font that you like from dafont.com, download it.
4. Go to sIFR Generator and upload the TTF file, generate the .swf.
5. Upload the swf to the /wp-content/plugins/wp-sifr/fonts folder
6. In the backend, activate the font and apply the correct CSS class, click “Save Changes”.
7. That’s it. It should work

Now, I’m not too pleased with the loading time, but for someone unfamiliar with javascript or that doesn’t want to fool with it all, this is a viable alternative. I experimented with it, but ultimately I’m going to slim it down by incorporating the sIFR into my theme. It’s an iterative process.