Good tip with problem with small size with Fire Fox browser

I had this same problem.
With FF, WDL screen was very small if I set WDL using “%” with width and height.

Then I remove two lines from my code;


they are the first 2 lines with the “Carter Lake templates”
After this, all is fine and now I can use “%” and WDL screen is normal size also with FireFox.

Sorry if this has been asked before but does anyone have an answer as to why removing the document type definition makes a difference?

…or is this just the way the gods have deemed it, and therefore it should be accepted :wink:


Maybe it isn’t that line itself…

It possibly could be what that line requires which is all XHTML is case-specific. In XHTML 1.0, all elements and attribute names must be written in lower case:

While in HTML mixed cASe is supported.

Someone would need to do some checking and see if ensuring all is in lower case if that line still causes issues.


Here’s a page that works:

Weather Display Live
/* hide from ie on mac \*/
html {
	height: 100%;
	overflow: hidden;

#flashcontent {
	height: 100%;
/* end hide */

body {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #ffffcc;
You need to install a flash player, or upgrade your flash player.
It uses flashobj.js from Geoff Stearns -

I don’t know if this helps… but that line in HTML basically means go to the W3C website and grab the XHTML Template and tell me how to display the information here in the coding. So my presumption is that FireFox being Firefox is rather strict in to ahdearing to the correct formats as described within the WhitePapers that W3C put out… which would be why it would be producing this, cuz its the correct way of doing it… unlike IE who actualy do the wrong thing :stuck_out_tongue:

An alternative would be to use a Document type that allows what you are attempting to do.

FF is only doing what it is told to do and that is adhear to (in this case) XHTML 1.0 Transistional valid code.

Removing it, gives no direction and doesn’t really solve the issue if you are attempting to really be XHTML 1.0 compliant.

There are many valid doc types, each supporting different html protocols…


I tried finding the part to cut off so that my WDL will work properly in firefox, but i cant seem to find it… some help pls?

You don’t have it on your page, so there is nothing to cut off.

But i still have that problem, on firefox its coming really small

try it on firefox:

Try removing the ALIGN=“” on the object statement, I dont have that on mine and it works in FF OK.


still same problem

You have a syntax error on the embed line

Look for wmode="transparent

what should i do? the line looks fine…

It needs to be wmode=“transparent”

My bad Tumas.



Worked Thanks guys!

It is still not working right in Firefox. Is that what you are referring.


OK guys, thanks for your help… sorted.

  • [li]changed the doctype to

    [li]changed settings to
    var widthOfWdl = “100%”;
    var heightOfWdl = “750”;[/li]

I had set the absolute height in the div tag but that hadn’t helped. The heightofwdl was where I should have set it.

I found a fix that works with doc type xhtml and still be compatible with Firefox :smiley: :slight_smile:
no need to change or remove the doc type 8)

I used to have to have a wdl page that had a diff. doc type and I did not even load my nav menu on the page because it would interfere.
I now can load it in my carterlake style template xhtml site and it will resize properly when I select a wide or narrow style with my style switcher feature. It even obeys the narrow centered style staying in the centered page div. I tested it in Firefox 2.0 and IE6

The beauty of this is I can resize my browser window in Firefox or IE and WDL resizes just like I want…

Here is my wdl page:

Here is how I did it and it works with WDL or MML. 8)
I modified a version of swfforcesize.js and named it wdl-mml-forcesize.js

download wdl-mml-forcesize.js

You need to load the javascript libraries and set any div in the chain of divs that lead to your wdl div to 100% height or Firefox will not resize it (it will always appear about 200px high)

Put this in the of the html of the WDL or MML page

<!-- mchallis begin added for WDL or MML-->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="wdl-mml-forcesize.js"></script>
<style type="text/css" media="screen">
  html, body, #page, #main-copy, #flashcontent {
<!-- mchallis end added for WDL or MML -->

Let me explain a bit more …
Include CSS to set the height of the html element, the body element and the entire chain of block level HTML elements that your SWF will be nested in to height:100%, because Firefox (or: any Gecko based browser) in standards compliant mode (or: using a valid DOCTYPE) interprets percentages in a very strict way (to be precise: the percentage of the height of its parent container, which has to be set explicitly):

my page has

then then
then finally

Here are the settings of the wdl object inside the html:

<div id="main-copy">

    <h3>Weather Display Live</h3>

Note: If you add or remove any html content in this portion of this page,
you will need to adjust the settings for the swf below:
var BelowDivPadding, and var PageHeightPadding will have to be set to a higher number(add)
or lower number(remove),
otherwise your swf will overflow the bounds of where it is supposed to be positioned.

<b>What is Weather Display Live?</b>

Weather Display Live is an add-on Flash movie for Weather Display which allows you to view live
weather data over the web from your weatherstation in nearly real time.
This Weather Display weather station data is updated every 5 minutes.

Find out more about Weather Display Live (WDL) ...
<a href="" title="Add WDL to your website," target="_blank">Add WDL to your website</a>

Note: Do not add any html content below this portion of this page!
or your swf will overflow the bounds of where it is supposed to be positioned.

<!-- Weather Display Live for Weather Display, the Weather Software for Weather Stations -->

<div id="flashcontent">
<noscript>Javascript must be enabled to view the live content.</noscript>

You need to install v8, or greater, of Flash Player from
<a href="">Adobe</a> to view this live content.

<script type="text/javascript">

// This version is custom tailored for the Weather Display/PHP/AJAX Website Template set WDL or MML page

// This is a custom version by Mike Challis

// This version is compatible with valid doc type xhtml while allowing dynamic resize
// the SWF while resizing the window in Firefox or IE

// The alternative to this method is to set the swf width and height to static settings
// Swf width and height can be set to 100% but then it will not work correctly in
// firefox when a xhtml doc type is used

// This version requires the files swfobject.js and wdl-mml-forcesize.js to be
// located in the same folder on your web server as this page
// also, the script and style html is REQUIRED to be inside the head  /head container on this page

//  This method assumes that the swf 'flashcontent' div is inside a 'main-copy' div that is inside a 'page' div
//  as is standard for the Weather Display/PHP/AJAX Website Template set wdl page or mml page
//  or it will not work! If you delete one of these divs, or add an extra div inside these divs it will break
//  the correct display of the swf!

// #######################
// # Begin settings
// #######################

// # # # # # #
// # Two mandatory settings:

   // # You must enter the correct URL to your WDL or MML xml settings
var pathToConfig = "";
   // # you must set to your WDL or MML swf file name
   // # (note: this name will change every time you upgrade the version)
var swfFileName = "wdlv5_03.swf";

// # # # # # #
// # Optional settings:

   // set to minimum width size your swf can resize to,
   // usually leave this as is, SWFForceSize resizes it dynamically
var MinWidth = "610";
   // set to minimum height size your swf can resize to,
   // usually leave this as is, SWFForceSize resizes it dynamically
var MinHeight = "470";
   // set to maximum width size your swf can resize to,
   // usually leave this as is, SWFForceSize resizes it dynamically
var MaxWidth = 900;
   // Width to Height Ratio  Ie: 0.75 makes Width of 800 have Height of 600
var Ratio = 0.75;
   // If you want to add a little html content above WDL increase this pixel value,
   // otherwise the swf may overflow your footer (do not add quotes to the value!)
var BelowDivPadding = 350; // usually set to 100 or 200
  // If you want to add a little html content above WDL increase this pixel value,
   // otherwise the swf may overflow your footer (do not add quotes to the value!)
var PageHeightPadding = 450; // usually set to 300
   // Background color white is fine, unless you really want to chabge it
var backgroundColourOfSWF = "#ffffff"; // #ffffff is white

// #######################
// # End settings
// #######################

var so = new SWFObject(swfFileName+"?"+pathToConfig, swfFileName, MinWidth, MinHeight, "8", backgroundColourOfSWF);
so.addParam("quality", "high");
//so.addParam("wmode", "transparent"); // mchallis disabled for compatibility with multiple css style themes
so.addParam('salign', 'lt');           // align left top
if( so.write('flashcontent') ) {
    var forcesize = new SWFForceSize( so, MinWidth, MaxWidth, Ratio, BelowDivPadding, PageHeightPadding );

Note: Do not add any html content to this portion of this page!

</div><!-- end main-copy --> 

If this get a little confusing just view the source of my wdl page.

Looks like FAQ material Mike… I’ll add this to the plugins page for others to share :slight_smile:


Best regards,

Ken do you want me to put together a sample WeatherDisplay PHP Ajax template WDL page?