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.
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:
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
I found a fix that works with doc type xhtml and still be compatible with Firefox
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…
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 {
height:100%;
}
</style>
<!-- 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
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.
-->
<p>
<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.
</p>
<p>
Find out more about Weather Display Live (WDL) ...
<a href="http://www.weather-display.com/wdlive.php" title="Add WDL to your website," target="_blank">Add WDL to your website</a>
</p>
<!--
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.
-->
<!-- http://www.weather-display.com-->
<!-- 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="http://www.adobe.com">Adobe</a> to view this live content.
</div>
<script type="text/javascript">
// This version is custom tailored for the Weather Display/PHP/AJAX Website Template set WDL or MML page
// http://saratoga-weather.org/template/
// This is a custom version by Mike Challis
// http://www.carmosaic.com/weather/scripts.php
// 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 = "http://www.carmosaic.com/weather/wdlconfig5.01.xml";
// # 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 );
}
</script>
<!--
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.