I am the creator of multimedia engines trying to include some of my work for a client on the site for my Christmas present. I am trying to resize the .swf to fit the size of the browser since the fixed size is really messing with my resizing.
Each time I set the width / height of .swf to “100%” or “auto”, the movie is cropped top and bottom under the div containers. When I change the size of the container to 100%, I get a long thin film. I copied my code below and I would really appreciate your help. Feel free to criticize anything else about my code, either - I'm CSS virgin.
Many thanks!:)
<!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> <script src="SpryAssets/SpryEffects.js" type="text/javascript"></script> <script type="text/javascript"> function MM_effectAppearFade(targetElement, duration, from, to, toggle) { Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle}); } </script> <title>Eat, Drink, and Be Mary</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <style type="text/css" media="screen"> body { background:url('images/home.jpg'); background-repeat:no-repeat; background-size:cover; position:absolute; } html, body { height:100%; width:auto; min-width:700; } body { margin:0; padding:0; overflow:hidden; } .swfcontainer { margin-top:3%; width:100%; height:30%; margin-bottom:1px; } .swfcontainersmall { margin-left:10%; height:300px; margin-right:10%; } .flashfile { width:100%; height:100%; text-align:center; margin:2; padding:0; overflow:hidden; } .textcontainer { margin-bottom:3px; margin-top:0; margin-left:0; width:100%; margin-right:0; } .textcontainersmall { margin-top:1px; margin-bottom:1px; margin-left:25%; margin-right:25%; } #flashContent { width:100%; height:100%; } #wrap { min-height: 100%;} #main {overflow:auto; padding-bottom: 150px;} /* must be same height as the footer */ #footer {position: relative; margin-top:-100px; /* negative value of footer height */ height:100px; clear:both; border-bottom:solid 4px #333; } /*Opera Fix*/ body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px;/ } </style> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <body> <div id="wrap"> <div id="main"> <div class="swfcontainer"> <div class="swfcontainersmall"> <div class="flashfile"> <div id="flashContent"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/ pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="300" height="300" align= "middle"> <param name="SRC" value="EatDrinkAndBeMary.swf"> <param name="wmode" value="transparent" /> <param name="SCALE" value="noborder" /> <param name="BGCOLOR" value= /> <embed src="EatDrinkAndBeMary.swf" width="300" height="300" align="middle" scale="noborder" wmode="transparent" bgcolor="transparent"></embed> </object> </div> </div> </div> </div> <div class="textcontainer"> <div class="textcontainersmall"> <img src="Images/tasteful.png" alt="Eat, Drink, and Be Mary is a locally-owned catering favorite specializing in delicious appetizers and comforting American favorites for events big and small. We can provide your party with a full, friendly staff to complete your amazing experience." width="auto" height="auto" class="textcontainer" onload="MM_effectAppearFade(this, 3000, 0, 100, false)" /> </div> </div> </div> <div id="footer"> <img src="Images/MenuBottom.gif" width="100%" height="100px" alt="MenuBottom" /> <div> </body> </html>
source share