web layout issue

Forums » Tech and Talk » OS and Software » Webmasters and Developers » web layout issue


Uniqs: 344	Share Topic:	RSS topic:	toggle: flat / full normal / watch	Posting:	Post a:	Post a:

Links: ·How To Get Noticed ·Web Monks FAQ ·Webhosting FAQ ·Posting Code ·How To Post ·Webhosting forum

Web Page Adjustment ~ Help needed »
« Basic Auth -> PHP Specific Page

pnkmunky

join:2002-06-14
Ringwood, NJ

2 edits

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.

»www.lilisparties.com

here's my css code"

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

<!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>

permalink · 2008-09-07 16:46:21 · Print ·

twizlar I dont think so. Premium join:2003-12-24 Brantford, ON	Re: web layout issue Got a link instead? Hard to see whats working/not working without actual code and objects. -- Broadline Networks Inc.
	permalink · 2008-09-07 17:58:41 ·

pnkmunky join:2002-06-14 Ringwood, NJ	Re: web layout issue »www.lilisparties.com
	permalink · 2008-09-08 04:18:21 ·

twizlar I dont think so. Premium join:2003-12-24 Brantford, ON	Looks pretty much the same in IE and FF here, could you provide a screenshot of the problems? -- Broadline Networks Inc.
	permalink · 2008-09-08 10:32:37 ·

pnkmunky

join:2002-06-14
Ringwood, NJ

Re: web layout issue

see how there's space between the top blue border and the top of the swf? I want my swf to be right up against that top blue border. I have it setup fine in Dreamweaver and it looks the way it should but once its on the web its getting pushed down for some reason. I'm at the point where I'm thinking I should just deconstruct my index page and build it back up and then try figuring out what the matter is. The annoying part about this is I had this up and running fine until I corrected and validated my code. Unfortunately this is the only time I didn't backup my files so now I'm stuck struggling to figure out what the problem is. Thanks to anyone that can help me out, it would be greatly appreciated.

Also, in IE 6 on a PC the swf is aligned just fine with the top blue border except between the navigation and the top of the swf there is a black strip that's seperating the page. I don't know what I should do to my pages to make them work in IE 6.

permalink · 2008-09-08 11:19:25 · Print ·

twizlar I dont think so. Premium join:2003-12-24 Brantford, ON	ah ok, that setup is kind of a mess, with the overlayed divs etc. I would just make whatever you need around the flash one background image, then position the flash in the right place within that div, would save a lot of unnecessary work. -- Broadline Networks Inc.
	permalink · 2008-09-08 11:31:36 ·

pnkmunky join:2002-06-14 Ringwood, NJ	Re: web layout issue ok so you mean, take my gray bar which is between my nav and content area, take it out and add it to my content area background image? Can you elaborate on what else is messy about it?
	permalink · 2008-09-08 11:40:43 ·

twizlar I dont think so. Premium join:2003-12-24 Brantford, ON	Re: web layout issue Correct, I would just move everything to the content background image. Layered divs dont work well with flash in some browsers, thats all I meant. -- Broadline Networks Inc.
	permalink · 2008-09-08 11:45:54 ·

pnkmunky join:2002-06-14 Ringwood, NJ	Re: web layout issue ok apparantly the nav div was the culprit. The only way it seems to show up right in IE, Safari, and Firefox on both Mac and PC is if i absolutely position it....the only thing is everyone always says it's not good practice to absolutely position divs...but in this case i dont really see anything wrong with it because my site looks fine now..
	permalink · 2008-09-08 13:42:35 ·

your comment..

Forums » Tech and Talk » OS and Software » Webmasters and Developers	Web Page Adjustment ~ Help needed » « Basic Auth -> PHP Specific Page


Sunday, 29-Nov 18:16:55	Terms of Use \| Privacy Policy \| Hosting by www.nac.net - DSL,Hosting & Co-lo \| feedback \| contact over 10 years online! © 1999-2009 dslreports.com. page compression OFF