use quicktime or VLC. Probably quicktime. -Have that, -file not recognized means that the file I received was not compatible or corrupt maybe(?).
Anyway, using this, I get it working:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */
body {min-height:100%; height:101%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */
p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
</style>
<style>
body {width:100%;}
#top {height: 54px; width:auto; background-image: url('attachment.png')}
#top p {margin:5px 15px 5px 20px; color:white;}
</style>
<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
</head>
<body>
<div style="width:100%;">
<div id="top">
<p>This is the DIV with the background-image "attachment.png"</p>
</div>
<div style="width:auto; height:auto; background-color:#ececec; color:black; padding:25px 20px; margin:10px auto 0 auto;">
<p>This is the DIV below the top banner or header DIV</p>
<p>This is the DIV below the top banner or header DIV</p>
<p>This is the DIV below the top banner or header DIV</p>
<p>This is the DIV below the top banner or header DIV</p>
</div>
<div style="width:auto; height:auto; background-color:#898989; color:black; padding:25px 20px; margin:0px auto;">
<p>This is the DIV below the DIV below the top banner or header DIV</p>
<p>This is the DIV below the DIV below the top banner or header DIV</p>
<p>This is the DIV below the DIV below the top banner or header DIV</p>
<p>This is the DIV below the DIV below the top banner or header DIV</p>
</div>
</div>
</body>
</html> I think what's going on is that you're picking up some padding from something, -which is added~to the "width:100%;". Using "width:auto;" takes this into account and the actual width is margins, padding and width of container = "100% of available space". But yes, I was finally able to replicate the problem you showed. :)