5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

CSS Alignment issue in split view when inserting flash object

by Chris Worner
4 replies
  • WEB DESIGN
    • |
Hello,

I as the title suggests, every time I insert a flash object into a div in Dreamweaver, the alignment gets screwed up and all the divs align next to each other in a row for some strange reason after the flash object is inserted. If i switch to live view its fine, and when I do a browser preview it is fine as well.

Could you please help me?

Cheers
Chris


Here is the code;

Code:
<div id="wrapper">
	<div id="banner"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('logo','','images/banner2.gif',1)"><img src="images/banner1.gif" alt="logo" name="logo" width="447" height="60" border="0" id="logo" /></a></div>
<div id="nav"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About Me','','images/About-Me2.gif',1)"><img src="images/About-Me1.gif" name="About Me" width="59" height="26" border="0" id="About Me" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Conecept Design','','images/Concept-Design2.gif',1)"><img src="images/Concept-Design1.gif" alt="Concept Design" name="Conecept Design" width="95" height="26" border="0" id="Conecept Design" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Storyboard','','images/Storyboard2.gif',1)"><img src="images/Storyboard1.gif" alt="Storyboard Design" name="Storyboard" width="74" height="26" border="0" id="Storyboard" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('3D Design','','images/3D-Design2.gif',1)"><img src="images/3D-Design1.gif" alt="3D Design" name="3D Design" width="60" height="26" border="0" id="3D Design" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact Me','','images/Contact-Me2.gif',1)"><img src="images/Contact-Me1.gif" alt="Contact Me" name="Contact Me" width="74" height="26" border="0" id="Contact Me" /></a></div>
<div id="content">
  <div align="right">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="900" height="600" id="FlashID" title="Storyboard">
      <param name="movie" value="flash/storyboard gallery/storyboard gallery.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="11.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="flash/storyboard gallery/storyboard gallery.swf" width="900" height="600">
        <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="11.0.0.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" width="112" height="33" /></a></p>
        </div>
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>
  </div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
  </script>
</body>
</html>
#alignment #css #flash #inserting #issue #object #split #view
  • Profile picture of the author ronc0011
    Well first of all I don't use Dreamweaver, I use Visual Studio. But, be that as it may, Dreamweaver should have a "View in Browser" ability. I usually leave the browser open and just refresh after I make changes. I only use the split view to find pieces of code if the document is very big, i.e. click on object in design view which will highlight it in code view.

    Design view isn't typically the best for seeing how your document is going to display. As long as it isn't throwing any errors it should be OK. Also I don't know if DW flags things that aren't W3C compliant or depreciated like Visual Studio does.
    {{ DiscussionBoard.errors[4004631].message }}
  • Profile picture of the author K Meier
    I work with Dreamweaver as well, but I would never really rely on the built in browser, simply because in the end you need to see what the website looks like in Firefox, Chrome, Safari and Internet Explorer, and not some programer IDE.

    Just like ronc0011 said, only use the built in browser to navigate through your code more easily, but for the actual preview, use your real browser.
    {{ DiscussionBoard.errors[4004669].message }}
  • Profile picture of the author Shishev
    Yup, what the other guys said is true. Dreamweaver's "design view" is made to just give you a glimpse of how the site would look in a browser, you should never rely on that - not even if it's live view. Instead, use the preview in browser option and as the others said just hit ctrl + s go to your browser hit F5 and take a look at the changes.

    Good luck!
    Signature
    Charles Ngo & Jeremy 'Shoemoney' are just some of my clients. Hire a REAL Designer, Get Conversions!
    {{ DiscussionBoard.errors[4011393].message }}
    • Profile picture of the author csmcmanus
      Originally Posted by Chris Worner View Post

      all the divs align next to each other in a row for some strange reason after the flash object is inserted.
      When you insert your flv, are you having your divs suddenly just slam to one side or the other? If so, in your options panel below ( where your page properties tab sits ) try resizing your flv to fit inside of your div. it could just be a case of you blowin out your width. dw will at times give you some funky renderings but if your divs are suddenly jumping around after you insert, to me its a classic case of being to big for the box.

      Do you have fixed width set for the div?
      {{ DiscussionBoard.errors[4030557].message }}

Trending Topics