Solved

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

Posted on 2009-05-03
11
616 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Need to click button twice to get results 2 33
Download a website to hdd 2 50
File download script VBSCRIPT fail on download PPT files 2 36
html5 auto send email 7 22
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.

895 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

15 Experts available now in Live!

Get 1:1 Help Now