I can’t figure out why my site displays fine in Firefox Safari and IE on my mac and shows up fine in IE on my pc but not in firefox on the pc. You can view the site here, the two flash objects on the page aren’t displayed cohesively with the rest of the page. here’s my css code"
/* CSS Document */
body {
background-color: #000000;
padding: 0;
text-align: center;
margin: 0;
}
#wrapper {
text-align: left;
width: 918px;
position: relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: auto;
}
#header {
left:0px;
top:0px;
width:918px;
height:364px;
z-index:2;
}
#header_right {
left:580px;
top:0px;
width:338px;
height:364px;
z-index:3;
}
#flash_logo {
left:0px;
top:0px;
width:580px;
height:364px;
z-index:4;
position: relative;
}
#header_right_contactus {
left:580px;
top:90px;
width:338px;
height:216px;
z-index:10;
float: right;
position: absolute;
background-image: url(images/lilisparties5imgrdy2_03.jpg);
}
#nav {
left:0px;
top:-58px;
width:338px;
height:58px;
z-index:7;
float: right;
position: relative;
}
#gray_bar {
left:0px;
top:0px;
width:918px;
height:40px;
z-index:8;
background-image: url(images/lilisparties5_08.jpg);
position: relative;
}
#main_content_area {
left:0px;
top:0px;
width:918px;
height:auto;
z-index:2;
text-align: left;
background-image: url(images/lilisparties5imgrdy2_09.jpg);
background-repeat: repeat-y;
position: relative;
}
#footer {
left:0px;
top:0px;
width:918px;
height:140px;
z-index:2;
position: relative;
background-position: bottom;
background-image: url(images/lilisparties5imgrdy2_10.jpg);
}
#Layer1 {
position:relative;
left:30px;
top:0px;
width:392px;
height:318px;
z-index:9;
}
#lilisstory {
left:28px;
top:0px;
width:740px;
height:428px;
z-index:9;
text-align: left;
position: relative;
margin-right: auto;
margin-left: auto;
background-color: #aaaaac;
}
.style1 {
font-size: 12px;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}
#Layer3 {
position:relative;
left:-5px;
top:40px;
width:152px;
height:53px;
z-index:9;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
float: right;
text-align: center;
font-size: 14px;
}
#fairy {
position:relative;
top:105px;
width:130px;
height:129px;
z-index:1;
left: 710px;
margin-top: auto;
margin-bottom: auto;
background-image: url(images/fairy.jpg);
}
#Layer4 {
position:relative;
left:30px;
top:-90px;
width:251px;
height:105px;
z-index:1;
right: 0px;
margin-right: auto;
margin-left: auto;
}
#bottom_nav {
position:relative;
left:40px;
top:100px;
width:270px;
height:28px;
z-index:1;
margin-right: auto;
margin-left: auto;
}
#copyright {
position:relative;
left:725px;
top:70px;
width:180px;
height:17px;
z-index:1;
}
#install_flash {
position:relative;
left:0px;
top:0px;
width:120px;
height:20px;
z-index:1;
}
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Hi</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="ufo.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<?php include($_SERVER['DOCUMENT_ROOT']."/includes/header.php"); ?>
<div id="nav">
<?php include($_SERVER['DOCUMENT_ROOT']."/includes/nav.php"); ?>
</div>
</div>
<?php include($_SERVER['DOCUMENT_ROOT']."/includes/graybar.php"); ?>
<div id="main_content_area">
<div id="lilisstory">
<script type="text/javascript">
var FO = { movie:"lilisstory.swf", width:"740", height:"428",
majorversion:"6", build:"40" };
UFO.create(FO, "lilisstory");
</script>
</div>
</div>
<div id="footer">
<div class="style1" id="bottom_nav"><a href="index.php">Home</a> | <a href="cyp.php">Choose Your Party</a> | <a href="testimonials.php">Testimonials</a></div>
<div class="style1" id="copyright">Copyright © Hi 2008</div>
</div>
</div>
</body>
</html>