Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2009-05-03
11
Medium Priority
?
633 Views
Last Modified: 2013-12-08
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

0
Comment
Question by:Concentus
  • 6
  • 5
11 Comments
 
LVL 13

Expert Comment

by:Brian Withun
ID: 24292224
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
 

Author Comment

by:Concentus
ID: 24297989
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
 

Author Comment

by:Concentus
ID: 24298055
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 13

Expert Comment

by:Brian Withun
ID: 24298198
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
 

Author Comment

by:Concentus
ID: 24299517
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
 
LVL 13

Expert Comment

by:Brian Withun
ID: 24300838
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
 
LVL 13

Expert Comment

by:Brian Withun
ID: 24300845
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
 

Author Comment

by:Concentus
ID: 24308144
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
 
LVL 13

Accepted Solution

by:
Brian Withun earned 2000 total points
ID: 24308514
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
 

Author Comment

by:Concentus
ID: 24309347
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
 

Author Closing Comment

by:Concentus
ID: 31577381
Thanks a lot for all your quick and helpful replies!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

782 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question