Seriously IE is freaking me out!!

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Seriously IE is freaking me out!!

Post 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;
}
 
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Seriously IE is freaking me out!!

Post by kaszu »

Change #content style from "top: 150px;" to "margin-top: 150px;"
Hope it helps.
Post Reply