VALIDATING FLASH

I came across the challenge of trying to validate flash in XHTML. The problem with trying to validate the code that Macromedia Flash spits out is that the <embed> tag is not valid HTML. Upon removing the <embed> tag, however, I found that this worked fine in Firefox but not in IE. In IE the flash wouldn't load.

I eventually came across a website that provided the solution by specifying which code to show depending on which browser was being used and this worked like a charm. Not only did the flash code validate but it also worked perfectly in both Firefox and IE.

[cick here] to view the webpage that provided the flash validation solution.

Below is the sample code for the flash validation solution:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="300" height="120">
<param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"> 
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
			
<!--[if !IE]> <-->			
<object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"
width="300" height="120" type="application/x-shockwave-flash">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
FAIL (the browser should render some flash content, not this).
</object>
<!--> <![endif]-->
</object>
					

FIREFOX CSS IMAGE ROLLOVER FIX

When creating rollover images using divs and CSS, I used to create 2 images - one for the "up state" and one for the "over state". However, I found that in Firefox when you initially rollover the image the "over state" image doesn't appear and only appears when you return to that page.

Here is a simple example of what this CSS code would look like:

a.rolloverButton:link {
  display: block; 
  width: 100px; 
  height: 20px; 
  background-image: url(images/button_up.gif);
  background-repeat: no-repeat;
}
a.rolloverButton:hover {
  display: block;
  background-image: url(images/button_down.gif); 
  background-repeat: no-repeat;
 }

The solution to this glitch is quite simple. All you need to do is create one single image file displaying both images instead of having 2 separate images. Then when you refer to the image in your CSS class, simply state the position that the image should appear within your <div> tag. See the example code below:

a.rolloverButton:link {
  display: block; 
  width: 100px; 
  height: 20px; 
  background-image: url(images/button_image.gif);
  background-repeat: no-repeat;
  backgroun-position:top;
}
a.rolloverButton:hover {
  display: block;
  background-image: url(images/button_image.gif); 
  background-repeat: no-repeat;
  backgroun-position:bottom;
 }
	

IE CSS # (HASH) FIX

It's no secret that IE sometimes displays CSS styles a little differently than other browsers. Something that might look perfect in Firefox mysteriously looks out of place in IE. One way to get around this would be to give IE it's own style instructions in the CSS. In order to differentiate which CSS styles need to apply to IE only, all you need to do is put a '#' symbol infront of the style.

Here is an example:

.randomBlock {
  padding: 10px;
  #padding: 5px;
 }