SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS div not showing content in correct location on FF3

    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
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Oh shoot I missed this thread lmao.

    On "#flashcontainer" you need to set both coordinates, try top:78px
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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..
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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".
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    That doesn't work for me. I reckon my post above is worth a try.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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..
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  13. #13
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Do check my post a minute or so before yours. I guarantee it's the way to go.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    And as mine, becuase I tested it out.

    Dunno what you are fighiting me about ..
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  16. #16
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well I tested my method out so if it didn't work for you then I don't know what to tell you.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  18. #18
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Didn't see that.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    ..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.. -.-
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •