Tutorial Embedding Flash

by in , 0

This is different than the default code that Flash provides. That typically involves the <embed> tag and is not valid XHTML. This doesn't use that, and is fully valid.

<object type="application/x-shockwave-flash" 
  data="your-flash-file.swf" 
  width="0" height="0">
  <param name="movie" value="your-flash-file.swf" />
  <param name="quality" value="high"/>
</object>

Reference URL

Tutorial Comments in HTML

by in , 0 

<div id="header">
   <p>Stuff</p>
</div> <!-- END div-header -->

The <!-- --> stuff is the HTML comment. It is a way to add notes into the code which will not display when the HTML is rendered by the browser. In the example above, to signify which opening div tag the closing tag was actually closing.

Tutorial Button With Line Breaks

by in , 0

You can use carriage return characters to break the line: &#x00A;

<input type="button" value="Really&#x00A;Tall&#x00A; Button">

Tutorial Basic Microformatted hCard

by in , 0

A basic address and URL, marked up using Microformats.

<div id="hcard-Christopher-John-Coyier" class="vcard">
 <a class="url fn n" href="http://chriscoyier.net">
  <span class="given-name">Christopher</span>
  <span class="additional-name">John</span>
  <span class="family-name">Coyier</span>
</a>
 <div class="org">CSS-Tricks</div>
 <a class="email" href="mailto:chriscoyier@gmail.com">chriscoyier@gmail.com</a>
 <div class="adr">
  <div class="street-address">123 Appleseed Street</div>
  <span class="locality">Chicago</span>, <span class="region">IL </span> <span class="postal-code">60647</span>
  <span class="country-name">United States</span>
 </div>
 <div class="tel">555-555-5555</div>
</div>

Reference URL

Tutorial Base64 Encode of 1x1px Transparent GIF

by in , 0

Just in case you need one. You can stretch it out to fill space as needed.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

Or a black one:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">

How to Add Spaces to Dock in OS X

by in , 0

This is absolutely not HTML related, but by sheer demand, I needed to add it somewhere. To add a "space" to the dock in OS X, open up Terminal.app and enter this. Enter it as many times as you want spaces. Error on too many, they are easy to remove.

defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="spacer-tile";}'

They won't show up until you force restart the Dock with:

killall Dock

To remove them, just drag them up and out of the Dock like any other icon. To move them around, click and drag.

Tutorial Add Body Class Just For IE

by in , 0 

<!--[if IE ]>
   <body class="ie">
<![endif]-->
<!--[if !IE]>-->
   <body>
<!--<![endif]-->
Or more robust version putting class on HTML element:
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]>    <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]>    <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
Now you can write IE specific styles in a regular stylesheet, by prefacing the CSS selectors with .ie