Posts Tagged ‘XHTML’

Valid Flash Embed and Preloaders Episode V: Internet Explorer Strikes Back

If you saw my previous post on valid Flash embed while maintaining preload functionality and used it, be warned: when the user does not have Flash, a lovely <![endif]--> will appear in IE where the Flash movie would normally be. The only way around it I’ve found is to actually duplicate everything from the opening object tag to the closing one so there is one each for IE and Firefox. For example:

<!--[if !IE]>-->
<object data="movie.swf" type="application/x-shockwave-flash" width="725" height="235">
	<param name="movie" value="movie.swf" />
</object>
<!--<![endif]-->
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="725" height="235">
	<param name="movie" value="movie.swf" />
</object>
<![endif]-->

Definitely a pain, but I’ve found no other way around it.

Also in my search for a solution, I discovered that our old pal Internet Explorer does not let you append anything but param elements to object elements in Javascript. That was pretty frustrating. Don’t try that. It doesn’t work.

—Kyle Blizzard

Tags: , , , , , , ,
Posted in Web Standards | Comments Off on Valid Flash Embed and Preloaders Episode V: Internet Explorer Strikes Back

The Pesky iframe and XHTML Strict

Update: Example code updated. It used the shortened form of iframe before, as in <iframe />. That doesn’t sit well with IE. It now uses <iframe></iframe> which works. The same goes for object. It similarly does not play well with Firefox 4 (perhaps even lower versions) in shortened form.

If you’ve done much web work before, you’ve probably, at some time or another, had to use an iframe. It’s not pretty, but sometimes it’s the only choice, such as embedding a widget from another site or displaying things such as real estate listings. One of my biggest problems with it is that it doesn’t exist in the spec for XHTML Strict! It exists in Transitional, but I don’t like to use it. That may be good enough for some developers, but certainly not for me. How about you?

In Internet Explorer 8 (and possibly IE7, but I have not tested it) and Firefox, you can use the object element to embed a web page just like an iframe; however, IE gives it a thick, lovely border that seems impossible to remove. Here’s the trick: employing IE’s conditional comments, use an iframe for IE and an object for everything else. Here’s an example:

<!--[if !IE]><!--><object data="http://www.blizzarddigital.com/blog/" type="text/html" width="320" height="240"></object>
	<!--<![endif]-->
<!--[if IE]><iframe frameborder="0" src="http://www.blizzarddigital.com/blog/" width="320" height="240"></iframe>
	<![endif]-->

Valid XHTML Strict! Make sure to keep your settings the same across both elements to keep it consistent.

Happy coding!

—Kyle Blizzard

Tags: , , , , , ,
Posted in Web Standards | Comments Off on The Pesky iframe and XHTML Strict

Valid Flash Embed and Preloaders in Internet Explorer

Hello once again, web friends. Today I bring tidings of Flash preloaders and validity.

You may have noticed that with the embed code from my YouTube article that Flash movie preloaders don’t work in Internet Explorer, and the movie has to load entirely before it even displays at all. This is because Internet Explorer requires a different attribute and the removal of another in the object tag to let preloaders work properly. However, with different attributes, the Flash movie will not display at all in Firefox, so we must use Internet Explorer’s conditional comments to utilize two different opening object tags. Behold:

<!--[if !IE]>--><object data="yourmovie.swf" type="application/x-shockwave-flash"
	width="320" height="240"><!--<![endif]-->
<!--[if IE]><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
	width="320" height="240"><![endif]-->
	<param name="movie" value="yourmovie.swf" />
	<param name="quality" value="high" />
</object>

The first line is the original that works in both IE and Firefox but doesn’t allow preloaders in IE. The second is the IE-only method that works with preloaders. Note the lack of a data attribute and the addition of a classid attribute.

Well, there you have it. Venture forth and embed Flash validly with preload animations!

—Kyle Blizzard

Tags: , , , , , , , ,
Posted in Web Standards | 1 Comment »

Semantic Markup – Why Should You Use It?

Your markup should have meaning. Markup your content appropriately (e.g. put your address and phone number in the address element) and it becomes much more readable to search engines and other software used for data extraction. Using only div and span elements leaves much to be desired, semantically speaking. These elements are certainly indispensable, however, there are some cases where there are more meaningful elements to use. For example:

  • Use h1 as your page title; use h2 and on appropriately as sub-headings on the page. This provides an outline of your document.
  • Use lists (dl, ol, ul) instead of manually placing numbers or bullets.
  • Use address for any contact information on your page, including physical address, email address, phone numbers, and whatever else you would consider to be contact info.
  • Use table on data best represented in rows and columns. Use thead and th to markup the column headings and tbody for the data itself.

Check the HTML spec for additional meaningful elements and get to work! 🙂

You can use the W3’s handy Semantic Data Extractor tool to test your new semantic web site to give you an idea of how it would be seen by software.

That does it for now. See you next time! Until then, read SEO and Validation.

—Kyle Blizzard

Tags: , , , , ,
Posted in Web Standards | 2 Comments »

Valid Flash Embed – Make That YouTube Embed Valid!

Hola! It’s been a while. I’ve got another gripe, and this time it’s with Flash embed code!

Most of the embed code I see for Flash movies is invalid, usually containing the non-existent embed element or some-such. Even the code provided by YouTube for embedding videos contains embed. This can easily be thrown out and will—probably most of the time—instantly make your code valid.

Here’s an example (in XHTML) of a valid Flash embed that works in at least IE6+, Firefox, and Safari:

<object data="flash.swf" type="application/x-shockwave-flash" width="320" height="240">
<param name="movie" value="flash.swf" />
</object>

That’s all there is to it. Adjust the parameters and add additional param elements as necessary. If your Flash movie requires variables, just add an extra param as follows:

<param name="flashvars" value="arg1=foo&amp;arg2=bar" />

If you place additional elements inside the object element, it will act as a fallback, displaying if the Flash plugin isn’t installed. For example:

<object data="flash.swf" type="application/x-shockwave-flash" width="320" height="240">
<param name="movie" value="flash.swf" />
<img src="fallback.jpg" alt="Flash Didn't Load!" />
</object>

That’s all for now. Happy coding!

—Kyle Blizzard

Tags: , , , , , , , ,
Posted in Web Standards | Comments Off on Valid Flash Embed – Make That YouTube Embed Valid!