CSS div not showing content in correct location on FF3

**lorne17** · Sep 4, 2009 08:10

Hello there,

I have my site www.slarc.com/test/portfolio.html and I am trying to get my flash content on the right side to not show the background bar above and below it. I had this working and then changed something in the css and now i have no idea what happened.

If you look at the FF3 image attached, you'll see two orange bars...that's the backgrounds showing through. Whereas, the ie8 file is showing the exact same file loading but with no background showing.

Ideas?

thanks,
Lorne

**ralph.m** · Sep 4, 2009 21:42

EDIT: Doh! I'll leave the comments below, but I've just realized that they are silly, because you WANT the Flash to be transparent, so that the background image can be seen....

===

Since you ask for "ideas", I'll offer this, though I know nothing about Flash. Just the other day there was a discussion about Flash, and from that discussion I'd suggest trying this:

Change this line

Code:

<param value="transparent" name="wmode"/>

to

Code:

<param value="opaque" name="wmode"/>

and see if that helps.

If it doesn't work, perhaps you could also try this:

Code:

#flashcontainer {
  background-color: white;
}

PS The thread I mentioned is here:
http://www.sitepoint.com/forums/show...58#post4367358

**RyanReese** · Sep 4, 2009 22:07

Oh shoot I missed this thread lmao.

On "#flashcontainer" you need to set both coordinates, try top:78px

**ralph.m** · Sep 4, 2009 22:24

Originally Posted by RyanReese

On "#flashcontainer" you need to set both coordinates, try top:78px

bottom and right are already set. top:78px just makes the gap at the bottom bigger.

Weird: this is just like the flash thread from a day ago, where the flash header was not filling the set area as expected. [EDIT: that site is working now, I notice. Hopefully OP will post feedback.] Very odd.

Wow... IE8 outdoing Firefox?

**RyanReese** · Sep 4, 2009 22:29

Guess I forgot to add one more thing in...

Remove bottom:0; (top:78px; should be there now)

And no it's not like the other thread, normally flash problems are dropdowns appearing behind flash menus, which normally is caused by the wmode not being transparent, but rather the default value (window)

Just trust me I'm right..

**ralph.m** · Sep 4, 2009 22:29

Ah, regarding the forum post / site I mentioned above, the change on that site is that the height of the Flash object was changed from 200px to 250px. My guess is that the Flash object was sqeezing down because not enough height was set.

Perhaps in this case, then, with width of #flashcontainer is not quite the width of the Flash file, making it thus squeeze down a bit in Firefox? Worth checking, anyway.

For example, the inner Flash object has height="520" width="273". Perhaps change to width:"275".

**RyanReese** · Sep 4, 2009 22:31

Look at the red..

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin 

template="/Templates/Template-Main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<base href="http://www.slarc.com/test/portfolio.html" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Portfolio | Smith LaRock Architecture P.C.</title>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="head" -->
<script type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<script type="text/javascript" src="highslide/highslide-full.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<![endif]-->
		<script type="text/javascript">
			// always use this with flash, else the movie will be stopped on close:
			hs.preserveContent = true;
			// Optionally set the swfOptions. See 

http://highslide.com/ref/hs.swfOptions for full documentation
			hs.swfOptions = {
				version:			  "8",
				expressInstallSwfurl: null,
				flashvars:			{},
				params:			   {base:".", allowFullScreen:"true"},
				attributes:		   {}
			};
		</script>
        <style type="text/css">
		.album2 {cursor:auto;}
		.album2 a:hover{background-color: #009900;}
		</style>
 

<!-- InstanceEndEditable -->
<link href="_StyleSheet.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="_StyleSheet_ie6.css" />
<![endif]-->
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:497px;
	top:25px;
	width:653px;
	height:33px;
	z-index:1;
}
-->
</style>
<script src="AC_RunActiveContent.js" type="text/javascript">
</script>
<!-- InstanceParam name="class" type="text" value="Portfolio" -->
<style>
#flashcontainer{top:78px;bottom:auto;}
</style>
</head>

<body class="Portfolio">

<div id="container">
  <div id="header">
    <div id="headerlogo">
    <a href="index.html"><img src="Images/SLA-Logo-GreenFont-Transparent.png" alt="" 

width="310" height="92" /></a>
    <!-- end #headerlogo --></div>
    <div id="navbar">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" 

height="20" width="700">
    <script type="text/javascript" src="Scripts/ieupdate.js"></script>
    <param name="movie" value="NavMenu.swf">
    <param name="quality" value="high">
    <param name="wmode" value="opaque" />
    
    <object data="http://www.slarc.com/test/NavMenu.swf"         
            type="application/x-shockwave-flash" 
            height="19" 
            width="655">
      <param name="quality" value="high">
      <param name="wmode" value="opaque" /> 
    </object><a class="zxnvgquixelotdanrivj" href="http://www.slarc.com/NavMenu.swf"></a>
  </object>
    <!-- end #navbar --></div>
  <!-- end #header --></div>
    <div id="pagetitle">
    <!-- end #pagetitle --></div>
  <div id="flashcontainer">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
          

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" 
          width="275" 
          height="520">
    <script type="text/javascript" src="Scripts/ieupdate.js"></script>
    <param name="movie" 
           value="sidebarright.swf" />
    <param name="quality" 
           value="high" />
    <param name="wmode" 
           value="transparent" />

    <object data="sidebarright.swf" 
            type="application/x-shockwave-flash"
            width="273" 
            height="520" >
      <param name="quality" 
             value="high" /> 
      <param name="wmode"
             value="transparent" />
    </object>
  </object>
  <!-- end #flashcontainer --></div>
  <div id="bodycontent" class="scroller"><!-- InstanceBeginEditable name="Body" -->
	<p>
	  <!--<div id="album1"><a href="Portfolio Galleries/slideshow/slideshow.swf" 

onclick="return hs.htmlExpand(this, { 
			objectType: 'swf', width: 670, 
			objectWidth: 670, objectHeight: 300, 
			preserveContent: false, wrapperClassName: 'no-footer', 
			allowSizeReduction: false, maincontentText: 'You need to upgrade your 

Flash player' } )"><img src="Images/Portfolio Buttons/Command-&amp;-Control.jpg" alt="" 

/></a></div>
    <div id="album2" onclick="window.open('http://www.google.com','_self')"> </div>
    <div id="album3"></div>
    <div id="album4"></div>
    <div id="album5"></div>
    <div id="album6"></div>
    <div id="album7"></div>
    <div id="album8"></div>
    <div id="album9"></div>
    <div id="album10"></div>
    <div id="album11"></div>
    <div id="album12"></div>
	-->
    </p>
	<p><a href="Portfolio Galleries/slideshow/slideshow.swf" onclick="return 

hs.htmlExpand(this, { 
			objectType: 'swf', width: 670, 
			objectWidth: 670, objectHeight: 300, 
			preserveContent: false, wrapperClassName: 'no-footer', 
			allowSizeReduction: false, maincontentText: 'You need to upgrade your 

Flash player' } )"><img src="Images/Portfolio Buttons/Command-&amp;-Control.jpg" alt="Command 

&amp; Control" class="album" /></a>
	  <a href="Portfolio Galleries/slideshow/slideshow.swf" onclick="return 

hs.htmlExpand(this, { 
			objectType: 'swf', width: 670, 
			objectWidth: 670, objectHeight: 300, 
			preserveContent: false, wrapperClassName: 'no-footer', 
			allowSizeReduction: false, maincontentText: 'You need to upgrade your 

Flash player' } )">
	    <img src="Images/Portfolio Buttons/Laboratory.jpg" alt="Laboratory" class="album" 

/></a>
	  <a href="Portfolio Galleries/slideshow/slideshow.swf" onclick="return 

hs.htmlExpand(this, { 
			objectType: 'swf', width: 670, 
			objectWidth: 670, objectHeight: 300, 
			preserveContent: false, wrapperClassName: 'no-footer', 
			allowSizeReduction: false, maincontentText: 'You need to upgrade your 

Flash player' } )">
	    <img src="Images/Portfolio Buttons/Maintenance-&amp;-Warehouse.jpg" 

alt="Maintenance &amp; Warehouse" class="album" /></a>
	  <a href="Portfolio Galleries/slideshow/slideshow.swf" onclick="return 

hs.htmlExpand(this, { 
			objectType: 'swf', width: 670, 
			objectWidth: 670, objectHeight: 300, 
			preserveContent: false, wrapperClassName: 'no-footer', 
			allowSizeReduction: false, maincontentText: 'You need to upgrade your 

Flash player' } )">
	    <img src="Images/Portfolio Buttons/Blast-Resistant.jpg" alt="Blast Resistant" 

class="album" /></a>
	  <a href="Portfolio Galleries/slideshow/slideshow.swf" onclick="return 

hs.htmlExpand(this, { 
			objectType: 'swf', width: 670, 
			objectWidth: 670, objectHeight: 300, 
			preserveContent: false, wrapperClassName: 'no-footer', 
			allowSizeReduction: false, maincontentText: 'You need to upgrade your 

Flash player' } )">
	    <img src="Images/Portfolio Buttons/Operations-Camp.jpg" alt="Operations Camp" 

class="album" /></a>
	  <a href="Portfolio Galleries/slideshow/slideshow.swf" onclick="return 

hs.htmlExpand(this, { 
			objectType: 'swf', width: 670, 
			objectWidth: 670, objectHeight: 300, 
			preserveContent: false, wrapperClassName: 'no-footer', 
			allowSizeReduction: false, maincontentText: 'You need to upgrade your 

Flash player' } )">
	    <img src="Images/Portfolio Buttons/Multi-Purpose-Facilities.jpg" alt="Multi-Purpose 

Facilities" class="album" /></a>    </p>
  <!-- InstanceEndEditable -->
  <!-- end #body --></div>
  <div id="whitebar">
  <!-- end #whitebar --></div>
  <div id="footer">
  <!-- end #footer --><!-- #BeginLibraryItem "/Library/footer.lbi" -->
      <link href="_StyleSheet.css" rel="stylesheet" type="text/css" />
      <style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
      </style>
     <div id="footermenu">
    	<a href="Library Items/sladesignmovie.html">SLA<span class="style1">-</span>design<span 

class="style1">-</span>movie</a> | <a href="Library Items/links.html">links</a> | <a 

href="mailto:info@slarc.com">email</a>
     </div>
     <div id="footercontact">
<h6></h6>	   
800 Grant Street,  Suite 210 | Denver, CO 80203 | ph: 303.534.2200 | fx: 303.534.0342 | tf: 

866.534.2247    </div>
     <!-- #EndLibraryItem --></div>
<!-- end #container --></div>
</body>
<!-- InstanceEnd --></html>

**ralph.m** · Sep 4, 2009 22:35

That doesn't work for me. I reckon my post above is worth a try.

**RyanReese** · Sep 4, 2009 22:41

How does that not work for you. Do you want a SS??????? Heck look. Operawas the same as FF in this..and using the above code..

**ralph.m** · Sep 4, 2009 23:55

Yeah, but look at the bottom. There was a gap TOP AND BOTTOM. The gap at the bottom is just increased. The Flash file is being squeezed down because of the narrow width, just as in the other thread (IMHO).

**RyanReese** · Sep 5, 2009 00:00

Didn't see that.

Give the <object> inside #flashcontainer (first in source that gets opened) a background:white; to have it appear on top of the other background.

THat's the quickest fix.

**ralph.m** · Sep 5, 2009 07:54

Using the Edit HTML feature on firebug, I've confirmed that the problem is here. Change 273px to 275px and it's fixed:

Code:

<object data="sidebarright.swf" type="application/x-shockwave-flash" width="275" height="520">
      <param name="quality" value="high"> 
      <param name="wmode" value="transparent">
    </object>

**lorne17** · Sep 5, 2009 07:56

Originally Posted by RyanReese

Didn't see that.

Give the <object> inside #flashcontainer (first in source that gets opened) a background:white; to have it appear on top of the other background.

THat's the quickest fix.

Ok since I have this at work, I can't access it until tuesday. But yea when you set the top to 78px...it makes the bottom gap bigger. I'll check out the width. It should be set to 275, I just don't get why IE shows it correctly and FF doesn't, they both have the same CSS rules applied.

Also Ryan, I can't make the bg white because then it covers my color background and I need my flash not rectangular because of the way I designed it.

I'll check it out tuesday and gat back to you. Thanks for the suggestions thus far.

lorne

**ralph.m** · Sep 5, 2009 08:29

Do check my post a minute or so before yours. I guarantee it's the way to go.

**RyanReese** · Sep 5, 2009 08:47

And as mine, becuase I tested it out.

Dunno what you are fighiting me about ..

**lorne17** · Sep 8, 2009 07:47

Ok so I tried both methods.

Ryan, your method unfortunately didn't work. It basically made the gap bigger at the bottom. My template file was still keeping it at 273 px wide.

Ralph, your method worked great. For some reason I missed the width factor for the flash instance. I kept my css at bottom: 0px;

So thanks for the help to both of you. Much obliged it looks correct in FF now

Lorne

**RyanReese** · Sep 8, 2009 09:10

Well I tested my method out so if it didn't work for you then I don't know what to tell you.

**lorne17** · Sep 8, 2009 09:13

Originally Posted by RyanReese

Well I tested my method out so if it didn't work for you then I don't know what to tell you.

Yea I dunno, I thought it should work. But no worries. Thanks for the help. I appreciate it.

Lorne

**ralph.m** · Sep 8, 2009 15:46

The reason the other solutions didn't work is that they didn't address the problem, which was that the width setting on the Flash file was too narrow, causing the height to decrease proportionately. The Flash file just wasn't tall enough to fit the space under these circumstances, no matter what css was applied.

**RyanReese** · Sep 8, 2009 15:57

As said before like a freaking millino times, it worked for me, true it did cover up the problem, but then again flash is my archaellis heel.

**ralph.m** · Sep 8, 2009 16:00

Originally Posted by RyanReese

Didn't see that.

**RyanReese** · Sep 8, 2009 16:05

..funny? I see more things in this forum then most of the people in it-I do so many threads in this forum that noone else even touches. Don't act all high and mighty.. -.-

User Tag List

Thread: CSS div not showing content in correct location on FF3

Thread Tools

Display

CSS div not showing content in correct location on FF3

Bookmarks

Bookmarks

Posting Permissions