Page 1 of 1

Seriously IE is freaking me out!!

Posted: Thu Sep 18, 2008 4:15 pm
by Sindarin
Alright I ripped the design apart of my last site and rebuilt it, It validates, it looks correct but doesn't work correct in IE6.. again... what the heck is wrong with IE!?

This is how the site it's supposed to look like:
Image

But it looks like that,
Image

what I did is I tried to add more content so to stretch vertically the page and see everything's ok. The page works in Firefox, but the content and footer cuts off in IE6. Why is this happening!?

index.php (I use swfobject2 to embed swf)

Code: Select all

<?php 
//load dynamic page elements
require_once('files/scripts/php/dynamic-elements.php');
?>
 
<!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>
 
<!--title-->
<title><?php echo $page_title ?></title>
 
<!--encoding-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<!-- cache control -->
<meta name="revisit-after" content="7 Days" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
 
<!-- browser specific tags -->
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" /> 
 
<!-- favicon path -->
<link rel="shortcut icon" href="favicon.ico" />
 
 
<!--- ie6 png support -->
<style type="text/css" media="screen">
<!--
* { behavior: url(files/scripts/htc/iepngfix.htc) }
-->
</style>
 
<!--flash embed-->
<script type="text/javascript" src="files/scripts/js/swfobject.js"></script>
<script type="text/javascript">
            var flashvars = {};
            var params = {};
            params.play = "true";
            params.loop = "false";
            params.menu = "false";
            params.wmode = "transparent";
            params.allowscriptaccess = "always";
            var attributes = {};
            swfobject.embedSWF("files/flash/aetos.swf", "swf-aetos", "383", "185", "6.0.0", false, flashvars, params, attributes);
            swfobject.embedSWF("files/flash/aetos-steady.swf", "swf-aetos-steady", "383", "185", "6.0.0", false, flashvars, params, attributes);
            swfobject.embedSWF("files/flash/20xronia.swf", "swf-20xronia", "494", "113", "6.0.0", false, flashvars, params, attributes);
            swfobject.embedSWF("files/flash/image-slides.swf", "swf-image-slides", "506", "131", "6.0.0", false, flashvars, params, attributes);
            swfobject.embedSWF("files/flash/menu.swf", "swf-menu", "434", "18", "6.0.0", false, flashvars, params, attributes);
</script>
 
 
<!---stylesheets-->
<link rel="stylesheet" type="text/css" href="files/scripts/css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="files/scripts/css/style.css" media="screen" />
<style type="text/css" media="screen">
<!--
body {
    background-image: url(images/background-gradient.jpg);
    background-repeat: repeat-x;
}
.style1 {color: #000000}
.style2 {color: #FFFFFF}
-->
</style>
</head>
<body>
<!--wrapper-->
<div id="wrapper">
<!--header-->
  <div id="header">
  <div id="flashswap">
<div id="swf-20xronia"></div>
  </div>
  <div id="flashslides">
<div id="swf-image-slides"></div>
</div>
    <div class="style2" id="bluelogo"><img src="files/images/layout/top-label.jpg" width="123" height="111" alt="Label" /></div>
    <div id="flashmenu">
<div id="swf-menu"></div>
    </div>
    <div class="style2" id="logo">
<div id="swf-aetos-steady"></div>
    </div>
    <img src="images/banner-background.jpg" width="1000" height="150" alt="Background" />
    </div>
  <!-- /header -->
  <div id="content">
 
<br />
<br />
          <?php require_once('site-content.php'); ?><br />
<?php require_once('site-footer.php'); ?><br />
    </div>
 
    <!--/wrapper-->
  </div>
 
</body>
</html>

site-content.php

Code: Select all

<?php
echo "start Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here...<br/>Content goes here... end";
 ?>
style.css

Code: Select all

body {
    text-align:center;
}
a {
    text-decoration:none;
    color:#000000
}
a:hover {
    text-decoration: underline;
}
#wrapper {
    width:1000px;
    text-align:left;
    margin:0 auto;
}
/* header */
#header {
    height:150px;
    background-color:#FFFFFF;
    position:relative;
}
#logo {
    position:absolute;
    top:1px;
    left:-71px;
    width: 130px;
    height: 50px;
    z-index: 4;
}
#bluelogo {
    position:absolute;
    top:69px;
    left:57px;
    width: 125px;
    height: 50px;
    z-index: 3;
}
#flashmenu {
    position:absolute;
    top:79px;
    left:555px;
    width: 429px;
    height: 28px;
    z-index: 4;
}
#flashslides {
    position:absolute;
    top:150px;
    left:0px;
    width: 125px;
    height: 50px;
    z-index: 1;
}
#flashswap {
    position:absolute;
    top:150px;
    left:506px;
    width: 125px;
    height: 50px;
    z-index: 1;
}
/* content */
#content {
position:relative;
top:150px;
left:0px;
background-color:#FFFFFF;
overflow:auto;
}
 
/* footer */
 
#footer {
    color: #000000;
    position:relative;
    margin-bottom: 0px;
    background-color:#FFFFFF;
}
#footer a {
    color:#0099FF;
}
 

Re: Seriously IE is freaking me out!!

Posted: Fri Sep 19, 2008 12:40 pm
by kaszu
Change #content style from "top: 150px;" to "margin-top: 150px;"
Hope it helps.