Alternate XHTML for Flash not appearing for Google Chrome or Safari

I. The Problem

For the past couple years, I’ve been using alternate XHTML for my Flash pages for purposes of both accessibility and SEO. The code generally looks something like this:

<div id="flashContent">
   <object type="application/x-shockwave-flash" data="swfFileNameHere.swf" height="650" width="950"> <param name="movie" value="swfFileNameHere.swf" />
      <div id="noFlashContent">
         <h1>Some Title</h1>
         <p>Some content here.</p>
      </div>
   </object>
</div>

The SWF is then displayed on the XHTML page:

A correctly-displayed Flash page.

To view the alternate XHTML content, I change the name of the SWF file in the object tag to a dummy file that doesn’t exist:

<div id="flashContent">
   <object type="application/x-shockwave-flash" data="nonExistentFileNameHere.swf" height="650" width="950"> <param name="movie" value="swfFileNameHere.swf" />
      <div id="noFlashContent">
         <h1>Some Title</h1>
         <p>Some content here.</p>
      </div>
   </object>
</div>

After uploading to my web host with Dreamweaver, the alternate XHTML is visible in Firefox, IE and Opera:

Alternate XHTML text visible instead of Flash content.

Strangely though, the alternate XHTML content is not visible in Google Chrome or Safari; it is completely “whited-out”.

Blank white area displayed instead of alternate XHTML content.


II. The Solution

The alternate XHTML content can be placed outside the object tags, and then positioned directly under the Flash object. For this to work, the Flash object must be set to transparent:

<div id="flashContent">
   <object type="application/x-shockwave-flash" data="nonExistentFileNameHere.swf" height="650" width="950"> <param name="movie" value="swfFileNameHere.swf" /> <param name="WMode" value="transparent" /> </object>
   <div id="noFlashContent">
      <h1>Some Title</h1>
      <p>Some content here.</p>
   </div>
</div>

The required CSS for this is:

#flashContent{
   height: 650px;
   width: 650px;

   /* IMPORTANT FOR ABSOLUTE POSITIONING TO WORK */
   position: relative;
   /* CANNOT USE ANY OTHER BACKGROUND COLOR!!! */
   background-color: transparent;
}
#noFlashContent{
   height: inherit;
   width: inherit;
   padding: 0px;

   position: absolute;
   top: 0px;
   left: 0px;
   z-index: -1;
   /* ANY BACKGROUND COLOR WILL DO... */
   background-color: white;
}

III. Static Image Replacement

Several of my Flash pages feature an animated panorama of Calgary, with an alternative static JPG image displayable using the following code:

<div id="flashFooter">
   <object type="application/x-shockwave-flash" data="myPathway/animatedCalgary.swf" height="66" width="965"> <param name="movie" value="animatedCalgary.swf" />
      <img src="myPathway/staticCalgary.jpg" alt="Calgary Skyline" />
   </object>
</div>

Again, the replacement image doesn’t display in Google Chrome or Safari. This can be fixed with the following code:

<div id="flashFooter" style="position: relative;">
   <object type="application/x-shockwave-flash" data="myPathway/animatedCalgary.swf" height="66" width="965"> <param name="movie" value="animatedCalgary.swf" /> <param name="WMode" value="transparent" /> </object>
   <img src="myPathway/staticCalgary.jpg" alt="Calgary Skyline" style="position: absolute; top: 0px; left: 0px; z-index: -1;" />
</div>

IV. Solutions In Search Of A Problem?

A day after coming up with the fix, I faced the task of manually changing the code for 40 or 50 Flash pages on this site.

At that point, I tried temporarily disabling Flash on various browsers. Doing so eliminated the “whited-out” effect entirely!

In other words, visitors without Flash never encounter the problem I thought they would. The only time this is ever a problem is when a dummy SWF file is uploaded during testing. But disabling Flash on my machine is a better method of testing alternate XHTML content anyways, and doesn’t result in the problem of “whited-out” alternate content.

Posted in Flash, HTML & CSS | Comments Off on Alternate XHTML for Flash not appearing for Google Chrome or Safari

33 Useful Websites

Of these, the only ones I’ve ever used before are the Online Etymology Dictionary and Print-Friendly (for WordPress).

These other sites might be useful, too:

Posted in Websites | Comments Off on 33 Useful Websites

Movie fonts

Fonts from various movies

Posted in Fonts | Comments Off on Movie fonts

Print-Friendly & PDF plugin added

Just added the Print-Friendly & PDF plugin for WordPress, because the Print-O-Matic plugin inexplicably stopped working.

The plugin is being used with default settings for the most part, aside from changing the PRINT button’s bottom margin to zero within the plugin’s setup page.

The plugin allows the option of placing PRINT buttons in every post, or only for selected posts. (On this blog, the latter was chosen.)

The short-code has been added to one of my most popular posts: How To Manually Install WordPress On GoDaddy. The short-code being used is:

[printfriendly]

See the Print-Friendly & PDF site for further information.

Posted in WordPress, WordPress - Plugins | Comments Off on Print-Friendly & PDF plugin added

Cookies For Comments plugin deactivated & uninstalled

Matt Cutts of Google gave a glowing review of the Cookies For Comments WordPress plugin, so I installed it on my general interest blog several months ago.

Yesterday, I discovered that the plugin was directing all comments to the spam folder – including my own!

Due to its overzealousness in eliminating comment spam, Cookies For Comments has been deactivated and uninstalled.

Posted in WordPress, WordPress - Plugins | Comments Off on Cookies For Comments plugin deactivated & uninstalled

WordPress plugin added: Custom Login

The login page for WordPress is very washed out, with text labels that are difficult to read, and borders around textboxes that are virtually invisible:

Standard WordPress login page. The textboxes have not been clicked, and their borders are barely visible.

The situation is somewhat better when a textbox has been clicked, but the border is still very light:

Default WordPress login page. The USERNAME textbox has been clicked, and the border around it is a pale blue.

Custom Login plugin by Austin Passy was installed recently on this blog, and the visibility of the login screens is no longer a problem.

A short list of changes that were made:

  1. A textured background gif was added (repeating), covering the shocking white.
  2. The same repeating background was added to the background of the login form as well.
  3. The login form was given a 3 pixel wide black border.
  4. The plugin’s default box shadow (5px 5px 10px) for the login form was added.
  5. The login form label color was changed to blue (#0000cc), with an opacity of 1.

In addition, the Custom Login plugin allows custom CSS. The following CSS changes were thus made:

/* BLACK BORDERS AROUND TEXTBOXES */
input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
     border: 2px solid #000000;
}

/* BLUE BORDERS AROUND TEXTBOXES (if textbox has been clicked) */
input[type=email]:focus, input[type=password]:focus, input[type=text]:focus {
     border: 2px solid #0000cc;
}

/* DISPLAY TEXTBOX LABELS IN BOLDFACE FOR ADDED VISIBILITY */
#login label {
     font-weight: bold;
}

Saving these changes gave the following result:

Custom login page. The textboxes have not been clicked, but are clearly visible.

The page now looks like this when the textboxes are clicked:

Custom WordPress login page. The USERNAME has been clicked, and the borders around it are a thick, dark blue color.

Others may wish to use Custom Login to change the logo as well. But my goal was more modest: to set up a login page that rests easier on the eyes:

Comparison of default vs. customized WordPress login page. The customized version has textboxes which are far easier to see.


UPDATE (Jun 30 / 2014): Nice. The new login page for my Ancient Greek blog:

Login page with 200 year old map of Athens in background.

Posted in WordPress, WordPress - Plugins | Comments Off on WordPress plugin added: Custom Login

100 Free Fonts

CreativeBloq.com has 100 of the best free fonts for web designers.

I don’t necessarily agree with all of their choices, but a lot of them really do look good.

Posted in Fonts | Comments Off on 100 Free Fonts

Problems Hardening WordPress Security With .htaccess

A couple nights ago, I modified the .htaccess files on my blogs in order to add better security for WordPress.

ThematoSoup.com has written an excellent piece on how to do this, but I still encountered a few difficulties…

I

The first problem was a syntax issue. Under their heading, Prevent Directory Browsing, ThematoSoup.com has the following code:

Options All -Indexes

I won’t say this is wrong, but it does give an error on my site host (GoDaddy).

TheSiteWizard also has a page on how to prevent a directory listing of your website, and here he omits the All modifier. This seemed to work much better for me:

Options -Indexes

II

The second problem was another syntax issue. Under their heading, Protect /wp-content Directory, ThematoSoup.com has the following code:

order deny,allow

Again, this yielded an error. But altering the sequence in which deny and allow occur in the line corrects the problem:

order allow, deny

III

The final problem was noticed a day after all the .htaccess modifications were made. Quite inexplicably, the Xorbin Flash Clock plugin ceased to display on my general interest blog!

Eventually I realized that this issue was caused by the Protect /wp-content Directory code. For most users, the code in this line should work perfectly well:

<files ~ ".(xml|css|jpe?g|png|gif|js)$">

However, WordPress users that are utilizing Flash plugins will need to add the swf extension (thereby allowing access to Flash swf files). This yields the following code:

<files ~ ".(xml|css|jpe?g|png|gif|js|swf)$">

Postscript: JavaScriptKit.com has much more information about .htaccess, which is well worth reading.

Posted in WordPress, WordPress - Security | Comments Off on Problems Hardening WordPress Security With .htaccess

Footer Putter copyright plugin

I’ve deactivated the Blog Copyright plugin and added the Footer Putter plugin in its place.

The Blog Copyright plugin wasn’t inserting the copyright information within the footer – it was adding it beneath the WRAPPER. Using CSS, I was able to re-position it within the COLOPHON…but this only worked for monitors with a resolution matching my own. (Larger resolution screens displayed the copyright somewhere to the left of the WRAPPER.)

Footer Putter inserts the copyright directly into the COLOPHON, and should not experience this problem.

(An additional advantage is that Footer Putter is being updated by its developers more frequently than Blog Copyright, and therefore may be more secure.)

Posted in WordPress, WordPress - Plugins | Comments Off on Footer Putter copyright plugin

Adobe Software Hacked

Good grief, this is the first I’ve heard of this. (I have an Adobe account…)

38 million Adobe users’ accounts compromised.

Credit card information also appears to have been stolen.

Posted in Adobe Suite | Comments Off on Adobe Software Hacked