Question : Firefox css border on inside of div when embedding Flash with SWFObject, why?

I'm working on a website and I've ran into a strange Firefox border problem. On every browser, things look great, except for Firefox.

It is a simple flash based website, with a centered div containing the flash, embedded with SWFObject. The div is 960x600, and so is the flash. The div has a 1 pixel border. In all other browsers, the border is on the outside. In Firefox, the border is on the INSIDE, effectively summing up the width/height of the div, including border, to 960x600. All other browsers sums it up to 962x602.

The real problem here is that this makes the flash scale down to 958x598 pixels, and causes all kinds of text offsets and distorts previously fine lines into weird patterns.
I know an alternative is to force flash to not scale, but then we'd lose pixels at the bottom and right of the flash.

If I switch out the content div to html content then the border is on the outside of the div and it is rendered with the correct width/height.

I'll attach the html code, but I am not allowed to show the flash content unfortunately.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="js/swfobject.js"></script>
		<script type="text/javascript">
			var flashvars = {};
			var params = {};
			var attributes = {};
			swfobject.embedSWF("flashfile.swf", "flashcontent", "960", "600", "10.0.0", false, flashvars, params, attributes);
		</script>
		<style type="text/css">
			
			html,body {width:100%;height:100%}
			
			body {
				background-color: #EFEFEF;
				margin: 0px;
				margin-top: 0px;
				margin-right: 0px;
				margin-bottom: 0px;
				position:relative;
				min-width:960px;
				min-height:600px;
			}
			
			#flashcontent {
                width: 960px;
                height: 600px;
				position:absolute;
				top:50%;
				left:50%;
				margin:-300px 0 0 -480px;
				border: 1px solid #CCCCCC;
				background-color:white;
			}
			
		</style>
		
		<!--[if IE 6]>
			<script type="text/javascript" src="js/minmax.js"></script>
		<![endif]-->
	</head>
	<body>
		<div id="flashcontent">
			<a href="http://www.adobe.com/go/getflashplayer">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
	</body>
</html>

Answer : Firefox css border on inside of div when embedding Flash with SWFObject, why?

In fact it's the other way round, IE puts the border on the inside and FF follows the W3C standard of putting it on the outside, but none of this should matter as your doctype is strict which forces all browsers to follow the same standards (even then IE6 & 7 aren't perfect).

maybe it's a bug in swfobject?
Try embedding the flash movie like in the snippet I've attached, it seems to work...

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="js/swfobject.js"></script>
		<style type="text/css">
			
			html,body {width:100%;height:100%}
			
			body {
				background-color: #EFEFEF;
				margin: 0px;
				margin-top: 0px;
				margin-right: 0px;
				margin-bottom: 0px;
				position:relative;
				min-width:960px;
				min-height:600px;
			}
			
			#flashcontent {
                width: 960px;
                height: 600px;
				position:absolute;
				top:50%;
				left:50%;
				margin:-300px 0 0 -480px;
				border: 1px solid #CCCCCC;
				background-color: #000;
			}
			
		</style>
		
		<!--[if IE 6]>
			<script type="text/javascript" src="js/minmax.js"></script>
		<![endif]-->
	</head>
	<body>
		<div id="flashcontent">
<object id="FlashID" width="960" height="600">
  <param name="movie" value="flashfile.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <param name="swfversion" value="10.0.0.0" />
  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  <param name="expressinstall" value="Scripts/expressInstall.swf" />
  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="flashfile.swf" width="960" height="600">
    <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="7.0.70.0" />
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
		</div>
	</body>
</html>