?
Solved

Background image cut in half in Firefox

Posted on 2010-04-06
5
Medium Priority
?
399 Views
Last Modified: 2013-12-07
Hi,
I'm trying to lay out a page with a large background image and a SWF placed above it in a specific spot. Displays great in all browsers except Firefox. The bottom of the background image is gone and replaced by a white background right below the swf. Please help! =)
<!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">
<head>
<style type="text/css" >
body {
  padding: 0;
  margin: 0;
  background: #142b39 url(background-2.jpg) no-repeat center top;

  width: 100%;
  display: table;
 
}
#content {
	width: 892px;
	margin: 50px auto 0;
	 
	
}
</style>
<title>eFlash</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>
<div id="content">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="892" height="682" id="FlashID" title="Flash Movie">
	  <param name="movie" value="eFlash.swf" />
	  <param name="quality" value="high" />
	  <param name="wmode" value="transparent" />
	  <param name="swfversion" value="9.0.45.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="eFlash.swf" width="892" height="682">
	    <!--<![endif]-->
	    <param name="quality" value="high" />
	    <param name="wmode" value="transparent" />
	    <param name="swfversion" value="9.0.45.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>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

Open in new window

0
Comment
Question by:kwood79
  • 2
  • 2
5 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 29941051
Why do you have the body set to display as a table?  
Also do you have a link to the flash movie or the background image?
0
 

Author Comment

by:kwood79
ID: 29941608
Unfortunately, I can't give out any of those files. Sorry. I am not a programmer. I got my code from this site: http://www.webdesignerwall.com/tutorials/how-to-css-large-background/
0
 
LVL 30

Expert Comment

by:LZ1
ID: 29942554
I can't see anything in the code above that would point to it being a coding issue with your CSS or HTML.  There is nothing white or with a color declaration other than your body which you have clearly defined.
Unless you post or give a link to the Flash file, or a working live link, I'm nto sure how much further we can help you.
0
 
LVL 4

Accepted Solution

by:
ronan1979 earned 2000 total points
ID: 30394709
i add this at the end of the CSS and >>> it fixed the FireFox problem <<<
html, body {
     height: 100%;
}
0
 
LVL 4

Expert Comment

by:ronan1979
ID: 30394794
more about sticky footer on http://ryanfait.com/sticky-footer/
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month3 days, 21 hours left to enroll

599 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question