Page 1 of 1

Serious layout problems in IE6

Posted: Sun Jul 13, 2008 5:37 pm
by Sindarin
I've been making a site with a friend for a client, and so far the layout looks really good.
When I got back from work, I opened the site in IE6 to fix a png bug reported by the client, but apparently that wasn't the only thing to fix. The layout looks messed up in IE6 but it shows correctly in IE7,FF,Opera (minor top margin problem), Safari.
Anyone can help me and tell what I'm doing wrong?

Re: Serious layout problems in IE6

Posted: Sun Jul 13, 2008 7:18 pm
by Eran
You have several markup errors, check your site in the w3 validator. Don't forget also to escape html entities so they don't break your markup.

As an aside, your site weighs around 1mb for a simple content page... that's kind of extreme. Consider looking up an optimization guide for page load

Re: Serious layout problems in IE6

Posted: Mon Jul 14, 2008 2:59 am
by Sindarin
Could I be doing something wrong with the php coding?
The site loads the header of the page dynamically,

Code: Select all

<?php
 
//display site header
 
echo '<!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-->
';
 
require_once("dynamic-title.php");
 
echo '
 
<!--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" />
 
<!--lightbox JS-->
<link rel="stylesheet" href="files/scripts/css/lightbox.css" type="text/css" media="screen" />
<script src="files/scripts/js/prototype.js" type="text/javascript"></script>
<script src="files/scripts/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="files/scripts/js/lightbox.js" type="text/javascript"></script>
 
<!--Tooltip script-->
<script src="files/scripts/js/tooltip.js" type="text/javascript"></script>
 
<!--Submit once script-->
<script src="files/scripts/js/submit-once.js" type="text/javascript"></script>
 
<!--Smooth scroll script-->
<script src="files/scripts/js/smooth-scroll.js" type="text/javascript"></script>
 
';
 
?>
and the dynamic-title.php

Code: Select all

<?
//dynamic title switch
switch($_GET['page'])
{
case 'contact':
     $title = '<title>???????????</title>';
  break;
  case 'istoriko':
     $title = '<title>????????</title>';
  break;
  case 'drasi':
     $title = '<title>?????</title>';
  break;
    case 'nea':
     $title = '<title>???</title>';
  break;
  case 'vounakaispilaia':
     $title = '<title>????? ??? ???????</title>';
  break;
  case 'perivallon':
     $title = '<title>??????????</title>';
  break;
  case 'sitemap':
     $title = '<title>Sitemap</title>';
  break;
  case '':
     $title = '<title>??????</title>';
  break;
default:
     $title = '<title>??????</title>';
}
echo "$title";
?>

Re: [unsolved] Serious layout problems in IE6

Posted: Fri Jul 18, 2008 9:45 am
by Sindarin
Can someone please help me on this?

I can't figure out what's wrong and I am nearly out of time. The w3c validator throws out errors about what appears to be "white spaces" between the code, nothing that can help me debug it.

Re: [unsolved] Serious layout problems in IE6

Posted: Fri Jul 18, 2008 10:13 am
by Eran
Don't echo static HTML in PHP, it is a waste of resources. Also, drop your HTML comments from your markup. Convert special characters such as the copyright symbol to their html entities.

Re: [unsolved] Serious layout problems in IE6

Posted: Fri Jul 18, 2008 12:04 pm
by Sindarin
Don't echo static HTML in PHP
But I need to return dynamic title and meta tags. How do I do that?

Re: [unsolved] Serious layout problems in IE6

Posted: Sat Jul 19, 2008 2:43 am
by JAB Creations
pytrin is correct, you want to think of PHP, (X)HTML, CSS, all as separate as possible layers.

Use (IMHO) the most important and fundamental part of PHP, includes.

Want to know what my website's index file looks like? This...

Code: Select all

<?php
include("sys_path/includes-00-templates_index-1.php");
echo '<title>JAB Creations</title>
<meta name="description" content="Description goes here" />
<meta name="keywords" content="no, more, then, eight, key, words" />
<meta name="language" content="en" />
include("sys_path/includes-00-templates_index-2.php");
include("content_files/this_pages_content_here.tpl");
include("sys_path/includes-00-templates_index-3.php");
include("sys_path/includes-00-templates_index-4.php");
?>
 
 
Essentially my site is made out of a few basic chunks of XHTML code (well without going in to it's extensive feature set but that doesn't relate to what you need in the thread).

Essentially it's content, sidebar, menu.

So I'd recommend trying something like this...

Code: Select all

<?php
include("headers_and_top_xhtml.php");
?>
<title>JAB Creations</title>
<meta name="description" content="Description goes here" />
<meta name="keywords" content="no, more, then, eight, key, words" />
<meta name="language" content="en" />
<?php
include("your_content.php");
include("your_sidebar.php");
include("your_menu.php");
?>
If you need to spit something out using PHP just open up PHP <?php //do it here ?> and move on. So long as your $variables aren't defined inside of functions() you should be able to access them across includes as well.

Also you should learn how divisible elements work in regards to float and width (and using background-color helps you visualize what you're getting). IE might suck but even IE4 and Opera 4 will render CSS level 1 layouts like what you're trying to do with tables (not that you should test with really old browsers). You can validate CSS as level 1.0, 2.0, 2.1, and 3.0 here...
http://jigsaw.w3.org/css-validator/#val ... th_options

Re: [unsolved] Serious layout problems in IE6

Posted: Sat Jul 19, 2008 5:26 am
by Eran
This is still wrong. Why are you outputting the doctype through PHP? it is completely static. Output dynamic content inside tags - only the title from your code is dynamic, so why echo everything in PHP?
And another thing - you have an influx of meta tags, most of which mean nothing to search engine, and you have special characters there that might be breaking up your markup on IE6 as I've said before (for example the copyright sign). Escape what you need, remove the rest

Code: Select all

 
<!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><?php echo $title; ?></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<meta name="description" content="" />
 
<meta name="robots" content="all" />
<meta name="keywords" content="aetos,glyfada,spilia,spilies,spilaiologiki,stalaktitis,stalagmitis,?????,???????,??????,???????,???????,?????????????,???????????,
???????????,cave,cavern,caving,cavist,stalactite,stalagmite,cave in" />
<meta name="revisit-after" content="7 Days" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="files/scripts/css/lightbox.css" type="text/css" media="screen" />
<script src="files/scripts/js/prototype.js" type="text/javascript"></script>
<script src="files/scripts/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="files/scripts/js/lightbox.js" type="text/javascript"></script>
<script src="files/scripts/js/tooltip.js" type="text/javascript"></script>
<script src="files/scripts/js/submit-once.js" type="text/javascript"></script>
<script src="files/scripts/js/smooth-scroll.js" type="text/javascript"></script>
 

Re: [unsolved] Serious layout problems in IE6

Posted: Tue Sep 02, 2008 4:14 am
by Sindarin
I decided to dump and completely remake the template, however there would be an issue as well. I think I figured out why the w3c validator gave errors before < tags. I think it's because I used BOM signature in my utf files. I've also reports that some people in IE6 and even 7 don't see anything! :?

Re: [unsolved] Serious layout problems in IE6

Posted: Wed Sep 17, 2008 9:27 am
by thinsoldier
Sindarin wrote:I decided to dump and completely remake the template, however there would be an issue as well. I think I figured out why the w3c validator gave errors before < tags. I think it's because I used BOM signature in my utf files. I've also reports that some people in IE6 and even 7 don't see anything! :?
Had that problem before. My current text editor offers utf8-no-BOM. So it's not a problem for me anymore.