CSS Forum

**mrflume** · 02:52 AM

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.the two flash objects on the page aren't displayed cohesively with the rest of the page. here's my css code"

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;
    background-color: #000000;
}
#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:580px;
    top:306px;
    width:338px;
    height:58px;
    z-index:7;
    position: absolute;
    float: right;
}
#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:27px;
    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;
}

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title></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">
<script type="text/javascript">
    var FO = { movie:"lilisstory.swf", width:"740", height:"428",
    majorversion:"6", build:"40" };
    UFO.create(FO, "lilisstory");
</script>

  <div id="lilisstory">  
  Install Flash Please
  </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 &copy; 2008</div>

</div>
</div>
</body>
</html>

**LadynRed** · 09-07-2008, 10:33 AM

I don't see anything wrong with it in Firefox at all. In fact, it's got some minor problems in IE6.

**mrflume** · 01:33 PM

do you see that "gray strip" area between the swf in the middle of the page and the border? I can't figure out why my swf gets pushed down when it is on the web. In IE 6 for some reason there is a big black horizontal space between my header/nav and my content/footer area as well. Can't quite figure out what I have to do to fix this.