?
Solved

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

Posted on 2009-05-03
11
Medium Priority
?
631 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

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.
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

719 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