Solved

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

Posted on 2009-05-03
11
615 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 13

Expert Comment

by:Brian Withun
Comment Utility
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
Comment Utility
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 13

Expert Comment

by:Brian Withun
Comment Utility
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
Comment Utility
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
Comment Utility
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 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks a lot for all your quick and helpful replies!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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)

772 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now