Quick Tip: Flash Content in Firefox 3.6

I had some trouble delivering full width & height flash content to Firefox 3.6 in the last days and I found two different solutions that will work fine.

Doctype

First of all beware of the documents doctype! I use this one to be safe:
(without the spaces on both ends)

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

You should always use valid HTML markup!

Your CSS

Here is the CSS to hide scrollbars and to maximize your content to the full width and height of the browser window.

	/* hide from ie5 mac \*/
	html {
	  	height: 100%;
	 	overflow: hidden;
	}
	#myAlternativeContent {
	  	height: 100%;
	}
	/* end hide */
	body {
		height: 100%;
		margin: 0;
		padding: 0;
		background-color: #eee;
	}

Using JavaScript SWFObject 2

The first solution is using SWFObject 2. A great tip is the SWFObject Generator AIR app to generate your HTML code (without CSS).







Using pure HTML Code

The second solution is without javascript. You can easily generate and download such an HTML file (without CSS) from labs.beautifycode.com


Leave a Reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>