Webpage won't align to top using SSI/PHP include file in Internet Explorer

A web page I am working on (http://dev-t1.centusco.com) won't align to the top of the page in Internet Explorer but it does in Firefox. The problem occurs when I display the page header as an include file (with php or #include). No matter what styles or tags I've used, there is a gap at the top in IE. Does anyone know how I can get the page to align to the top in IE using a table listed in an include file? Thanks.
http://dev-t1.centusco.com

Open in new window

ConcentusAsked:
Who is Participating?
 
Brian WithunConnect With a Mentor Commented:
Is that unexpected character appearing at the front or the back of the content from the included file?

If it's appearing at the back, perhaps the include file itself is to blame.  Maybe the file has an improper EOF character.
Try recreating the header_test4.shtml file.  What operating system is hosting this file?  

Linux and Windows use different characters for EOF.  Most applications won't care, but maybe PHP's include() is not one of 'em.
Windows EOF - ctrl+z (decimal 26)
Linux/Unix EOF - ctrl+d (decimal 4)

If you're making your header file on one OS, but using it on a different OS, this kind of problem can occur.
I wouldn't give this a high likelihood of success, but it's worth checking..

0
 
Brian WithunCommented:
The page I see now renders the same in IE7 and Chrome and FireFox.

I assume you are referring to the gap between the topmost image and the top of the web page?


0
 
ConcentusAuthor Commented:
Thanks for looking at this. Yes, I'm seeing a gap between the topmost image and the top of the web page in IE7 (and IE8) but not in Firefox (v2). I forgot you can't actually see the code because the home page is using  a php 'include' call to display the header.
index-t1.php.code.txt
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
ConcentusAuthor Commented:
Thanks for looking at this. Yes, I'm seeing a gap between the topmost image and the top of the web page in IE7 (and IE8) but not in Firefox (v2). I forgot you can't actually see the code because the home page is using  a php 'include' call to display the header. I created a simpler version of the files (excludes images) and included them with this comment. This can be seen at http://dev-t1.centusco.com/index_t1.php.
index-t1.php.code.txt
header-t1.shtml.code.txt
0
 
Brian WithunCommented:
You have several mismatched HTML tags that need to be addressed.

I think the browsers are getting confused as to how to apply styles because the markup language is invalid.

Run a validator against the HTML.

I use Notepad++ as my HTML editor and I like it because it'll colorize matching tags.  It's easier to see where a <TD> matches up to a </TD> with and editor like that.

http://notepad-plus.sourceforge.net/

0
 
ConcentusAuthor Commented:
bhwithun,

I installed notepad++ but I'm not seeing any mismatched tags.  Can you indicate any of the tags that aren't matched. I appreciate your help. What you said sounds like it could be causing the problem but I don't see any stray tags.
0
 
Brian WithunCommented:
Ok, for instance:

Line 25:
                  <TD style="width:100px; height: 16px;">
This TD tag has no closing element.


Line 44:
                        </TD>
This closing TD tag is supposed to close the tag from line 22, but NotePad++ shows me that it lines up with the opening tag on line 44 instead.

I ran into these particular difficulties when trying to figure out why your CSS wasn't eliminating the top gap.
0
 
Brian WithunCommented:
CORRECTION:

Ok, for instance:

Line 25:
                  <TD style="width:100px; height: 16px;">
This TD tag has no closing element.


Line 44:
                        </TD>
This closing TD tag is supposed to close the tag from line 22, but NotePad++ shows me that it lines up with the opening tag on line 25 instead.

I ran into these particular difficulties when trying to figure out why your CSS wasn't eliminating the top gap.
0
 
ConcentusAuthor Commented:
bhwithun,

Thanks again for looking at this. I simplified the code (a lot) to try to focus on the source of the problem and ensure there were no mismatched tags. I created these files:

http://dev-t1.centusco.com/index_test4_included.php 
     - has the header displayed as an include file (displays a gap at top)
http://dev-t1.centusco.com/header_test4.shtml
     - the include file header
http://dev-t1.centusco.com/index_test4_embedded.php
     - doesn't use an include file for the header but embeds the header code in the file itself (no gap)
http://dev-t1.centusco.com/index_test4_inclu_res.php
     - I did a View->Source from the Internet Explorer menu and copy/pasted the code into a new file.

I found that if I embed the header code in the index file there is no gap. But if I display the header using 'include' a carriage return or some other character is placed in the file that causes the gap (please see addedcharacter.jpg).

Do you have any idea what adds the (crlf?) character when an include file is used? I believe that if I can figure out what adds the line feed and how to stop it when I use '<?php include("nameoffile..."); ?>', the problem will be solved.

Thanks,

Concentus

<!-- This is the code for index_test4_included.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>
<style type="text/css">
.headerlo {
    	top: 0px;
	padding: 0px;
	margin-top: 0px;
	vertical-align: top;
	width: 750px;
	margin-left: auto;
	margin-right: auto;
	border: 1px;
	border-color: lime;
	border-style: none;
	background-color:black
}
body
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 12px;
	background-color: #FF9F84;
}
</style>
 
<title>test</title>
</head>
<body style="margin-top: 0;">
<table style="width: 100%; border: 1px solid #00FF00" cellspacing="0" cellpadding="0">
	<tr>
		<td style="margin-top:0px"><?php require("header_test4.shtml"); ?>
		</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>
</body>
</html>
 --------------------------------------------------
* * * Here is where a character gets added to the code at runtime
       You can find it between the >< in  ...0px">ÿ<table... if you 
       use the left right arrows to navigate between letters.
 
<td style="margin-top:0px">ÿ<table class="headerlo" style="width: 100%; border: 1px solid #0000FF">

Open in new window

addedcharacter.jpg
0
 
ConcentusAuthor Commented:
bhwithun,

Thanks. That helps a lot.
I'm using Expression Web to edit the files and the encoding is different from what's used on the server. There are certain characters that show up at the beginning of the file when edited with us-ascii encoding that aren't seen with the default encoding in Expression Web. I believe there is a way to fix the configuration of the application that I've got to figure out. But I edited and saved the files with a host provided editor and that fixed it.

That was the problem: hidden characters that were created by the editor.

Thanks a lot for all your help!

Concentus
0
 
ConcentusAuthor Commented:
Thanks a lot for all your quick and helpful replies!
0
All Courses

From novice to tech pro — start learning today.