I've recently been working on my site, and I decided to set up the site using php templates (splitting an html page into sections, then using php-require to load different sections of the page).

 

 

 

The page was working fine as a single html page, but as soon as I split it, something messed up the layout:

 

 

 

Good Layout:

 

 

 

 

Broken Layout:

 

 

 

 

Here is the php I'm using for the index.php:

 

<?php 



//  |------------------------|

//  |    Hitman Central     |

//  |     Page: Index        |

//  |------------------------|



// Adress Error Handling

ini_set ('display_errors', 1);

error_reporting (E_ALL & ~E_NOTICE);



// Require Page Header

require ('header.php');



?>





content goes here!





<?php



// Require Page Footer

require ('footer.php');



?>

 

 

 

I also made a package of all my site files if someone would be kind enough to check my code :pray: The html index is in there, along with the php index and the two included files.

 

http://www.hitmancentral.net/site.zip

Cant really get into it extensively , but can tell you this, the HTML only index page is not correct. it may look ok in IE but suffers the same problem as the php image when viewed in Firefox and Opera.

 

 

 

I'd work on getting the whole page cross browser compatible before splitting it up , you'll most likely come across whatever is causing your problem.

 

 

 

 

 

But just a note, splitting a page in different includes/requires doesn't make it template driven. A template system allows you to change variable assignments within an HTML page on the fly.

Ya, I noticed that problem in firefox.. Any suggestions for doing the cross-browser stuff?

 

 

 

Also, on a side note, I'm working on adding several different on-the-fly variable things, I just want to get this ironed out before I move any further into this.

Best bet is to make sure the page validates.

 

 

 

http://validator.w3.org/

 

 

 

And of course have the 3 major browsers installed to check the pages yourself :)

thanks, I'll go install opera now, then i'll have all 3 :)

I also strongly suggest utilizing css more. The only makrup you should have in your html document other than the content is that which defines the structure. All your presentation should be handled by the css (the critical step to having a template-based design) and only the css.

 

 

 

 

 

This will really make your life easier to making the layout cross browser compatible as you then only need to isolate a tiny chunk of css code to find the problem, rather than just to filter through lines and line of html. Once the html is valid; it's just a matter of playing with the css. And you rarely have to touch the html again.

IE shows a character stuck before your doctype line when viewing the source, though I can't seem to remove it using notepad++. There were also some unreadable characters along the top of the layout when I first loaded it in FireFox but these disappeared after a refresh, leaving just the blank gap.

 

 

 

Looking at the mountain of tables used for the layout, it's gonna be a real pain in the [wagon] to debug for most people. :?

IE shows a character stuck before your doctype line when viewing the source, though I can't seem to remove it using notepad++. There were also some unreadable characters along the top of the layout when I first loaded it in FireFox but these disappeared after a refresh, leaving just the blank gap.

 

 

 

Looking at the mountain of tables used for the layout, it's gonna be a real pain in the [wagon] to debug for most people. :?

 

 

 

ya, I saw that character as well, got no idea whats making it do that..

IE shows a character stuck before your doctype line when viewing the source, though I can't seem to remove it using notepad++. There were also some unreadable characters along the top of the layout when I first loaded it in FireFox but these disappeared after a refresh, leaving just the blank gap.

 

 

 

Looking at the mountain of tables used for the layout, it's gonna be a real pain in the [wagon] to debug for most people. :?

Chances are it is line breaks after the inital is opened.

 

 

 

I run into that problem alot. Use of

will most likely fix the entire problem the easiest and really speed up the page, but it'll be fun to pull off; especially for someone not too experienced with css-based design.

IE shows a character stuck before your doctype line when viewing the source, though I can't seem to remove it using notepad++. There were also some unreadable characters along the top of the layout when I first loaded it in FireFox but these disappeared after a refresh, leaving just the blank gap.

 

 

 

Looking at the mountain of tables used for the layout, it's gonna be a real pain in the [wagon] to debug for most people. :?

Chances are it is line breaks after the inital is opened.

 

 

 

I run into that problem alot. Use of

will most likely fix the entire problem the easiest and really speed up the page, but it'll be fun to pull off; especially for someone not too experienced with css-based design.

 

 

 

At first I thought that I had a

tag open, but the thing is, the page worked when it was just plain html, and i just cut-paste the two different parts into my template parts, so it's not like i missed a bit of code, it's all there.

There is definitely a character stuck in front of the < in your doctype line. Doing a select all when viewing source in FireFox (which I didn't do last time :wall: ) grabs the hidden character and makes it shows up when I past into notepad++.

 

 

 

Here is my edited page without the hidden character. It's just flat html and shows up correctly on my test box. I zipped it up so there's no chance of something getting missed in a copy/paste. :P

 

 

 

Are you using something like Dreamweaver or Frontpage for your coding? Wondering how the weird hidden character got there. :-k

 

 

 

Edit: The above file looks good in IE 6 and 7 but the gap still appears in FireFox. :-s

I'm using frontpage, basically for the coloured syntax

I'm using frontpage, basically for the coloured syntax

If you're only using frontpage for the syntax highliting, switch to editplus or notepad++

thanks, I'll look into that