# Problem with website's layout

**URL:** <https://forum.kirupa.com/t/problem-with-websites-layout/270225>\
**Category:** web dev\
**Created:** [September 7, 2008, 12:38am UTC](https://forum.kirupa.com/t/problem-with-websites-layout/270225 "2008-09-07T00:38:18Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![mrflume](https://avatars.discourse-cdn.com/v4/letter/m/eada6e/32.png) [@mrflume](https://forum.kirupa.com/u/mrflume)\
**Post date:** [September 7, 2008, 12:38am UTC](https://forum.kirupa.com/t/problem-with-websites-layout/270225/1 "2008-09-07T00:38:18Z")

</div>

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](http://www.lilisparties.com/), the two flash objects on the page aren’t displayed cohesively with the rest of the page. here’s my css code"

```auto

/* 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;
}

```

```auto

<!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 &copy; Hi 2008</div>
</div>
</div>

</body>
</html>

```