Serious layout problems in IE6

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

Serious layout problems in IE6

Post 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?
Last edited by Sindarin on Sun Dec 21, 2008 1:37 pm, edited 3 times in total.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Serious layout problems in IE6

Post 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
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: Serious layout problems in IE6

Post 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";
?>
Last edited by Sindarin on Mon Jul 28, 2008 3:15 am, edited 2 times in total.
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: [unsolved] Serious layout problems in IE6

Post 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.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: [unsolved] Serious layout problems in IE6

Post 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.
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: [unsolved] Serious layout problems in IE6

Post by Sindarin »

Don't echo static HTML in PHP
But I need to return dynamic title and meta tags. How do I do that?
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: [unsolved] Serious layout problems in IE6

Post 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
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: [unsolved] Serious layout problems in IE6

Post 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>
 
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: [unsolved] Serious layout problems in IE6

Post 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! :?
thinsoldier
Forum Contributor
Posts: 367
Joined: Fri Jul 20, 2007 11:29 am
Contact:

Re: [unsolved] Serious layout problems in IE6

Post 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.
Warning: I have no idea what I'm talking about.
Post Reply