Author Archive

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!

CSS Float Trick

Do you ever have a list of items (such as a ul) in which each item is floating to make them appear side-by-side (an example is the list of sites at BlizzardDigital.org)? Tired of using a non-semantic, empty div after the ul to clear the items? A useful trick is to add float: left; to the ul itself. This fits the ul‘s box around its inner items. Without float specified, the ul‘s box does not wrap around its items at all, making everything on the page after it scoot up behind all the list items. Very annoying. The normal fix for this would be to make the following element clear, but this isn’t always desirable. Your options are probably to have an empty div after it specifically to clear it (yuck) or make the probably unrelated following element clear it (yuck also). Just float the containing element (in my example, a ul) and set its width to 100%. The width makes sure no one squeezes in on the sides and therefore no clearing is necessary.

Clear as mud, right? 🙂

—Kyle Blizzard

Tags: , ,
Posted in Web Standards | Comments Off on CSS Float Trick

More Random Web Design Tips

Body Element Classes

One thing I’ve started doing somewhat recently is adding a unique class name to the body element of each page. This allows me to write page-specific CSS as necessary without creating an extra stylesheet. Ideally, there should be styles for common elements that make up the site, rather than style for each page, but this can’t always be avoided. One case could be that a particular page needs to have a slightly different layout than the rest of the site. Body element class to the rescue!

Internet Explorer 6

We all know Internet Explorer 6 is a regular pain in the neck, right? Fortunately, it’s easy to add IE6-specific style with this selector:
* html [additional selectors...]

For example, the style * html p { font-weight: bold; } makes all paragraphs bold only in Internet Explorer 6.  It’s valid, but no other major browser will apply it. This is useful because sometimes the style needed to make things in IE6 look one way is drastically different than what is needed to make it look the same in all the other browsers. A simpler solution, though, is to tell your client to upgrade his 8-year-old browser. 🙂

“Navbars”

A site typically has a “bar” of navigational links. Vertically laid out navigation is easy to create and append additional links later. Horizontal navigation is sometimes desired instead, but it’s not always as trivial to append and can be a little trickier to achieve.

This tip will be focused on horizontal navigation. First, you should most definitely use unordered lists (the ul element) to organize your navigation links whether you’re using vertical, horizontal, upside-down, or anything-else-you-can-think of navigation. (See the W3’s excellent webmaster tips for more on unordered lists and their uses.) Once you’ve marked up your navigational links, jump over to the stylesheet and add a display: inline; line to your navigation’s li elements. Now take a step back and behold your now-horizontal navigational links!

If you find you need to set the width and height of your links, just set the display type of the a elements to inline-block, which I was surprised to find out was actually supported in Internet Explorer 6! Once you’ve set that, your links will behave like block-level elements as far as styling goes, but they will remain positioned inline. Sweet!

Well, that’s all for now. Make sure to check back occasionally for more random web tips from your Uncle Kyle!

—Kyle Blizzard

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

The img Element Vs the CSS background-image Property

Don’t know when to use the img element or when to use the CSS background-image property? Don’t fret; there is hope. Read further and all shall be revealed.

The img element is best used for pictures that are completely unrelated to the stylesheet. That is, pictures that would need to display no matter how much the look of the site changes. These would be pictures related to a news article or photos in a gallery.

The CSS background-image property is for images that make up the appearance of the stylesheet. These pictures on one stylesheet would be different or just completely absent on another stylesheet. They don’t add to the content of the page in any way and are only there to give the page its “look”. These image files would be stored in the stylesheet’s images folder. (See my last post for more on this.)

Just another tip from your uncle Kyle!

—Kyle Blizzard

Tags: , , ,
Posted in Web Standards | Comments Off on The img Element Vs the CSS background-image Property

Organizing Your CSS Files

When I create a web site, I like to organize my stylesheets and images into a specific folder structure. It keeps things tidy and separates presentation files (stylesheets and images) from content files (pages and images related to the content). It also leaves room for additional stylesheet “themes” for your site.

Here is an example of this folder structure:

/styles/
/styles/default/
/styles/default/images/

Default in this example would be the name of the “theme”. The sites I develop typically do not have multiple themes for the user to pick, so I don’t usually take the time to give them fancy names. However, if your site utilizes multiple stylesheets that the user could choose from (such as at the CSS Zen Garden), creative names would be helpful.

All stylesheets for the Default theme would be placed in the /styles/default/ folder. Likewise, images used by those stylesheets would go in the /styles/default/images/ folder.

This method keeps your styles consolidated and makes it easy to use them across multiple sites. All you need to do is copy the folder to the other site; you don’t need to pick through the images folder and figure out which ones are used by the stylesheet and which ones aren’t.

Technically, you wouldn’t even need to copy anything to another site. You could just specify the full URL in the link element or @import rule on the page, but I urge you not to do this. Your visitors may be using security software that sees cross-site references as malicious, thus blocking the stylesheet from downloading or, worse, blocking the entire page.

—Kyle Blizzard

Tags: , ,
Posted in Web Standards | Comments Off on Organizing Your CSS Files