Space added on top of page

[son]

I have a header file for all web pages on one site. All fine, except that I need a database connection in one page to run a javascript that creates a slideshow. I check if the header file needs to display the code as:

if ($slideshow){include '/path/to/connect/file.php';mysql_set_charset('utf8', $dbc);include_once('htr/slideshow.php');}

The web page always shows a gap on top of my main container div which should not be there and is also not on any other pages. The include file starts with a php-opening tag and closes with a php-closing tag, no spaces before or after... What else could I check?Son

[justsomeguy]

Check the HTML source to see if there is anything there that would cause that. You can also use a tool like Firebug or IE's developer tools to inspect the page and see if something has margin or padding, or if there's an empty element there, etc.

[jeffman]

Did you at least set margin and padding to 0 for the body element, or the * universal element?

[son]

Did you at least set margin and padding to 0 for the body element, or the * universal element?

I cannot see any unusual spaces or characters inserted in source code. * is also set to 0. As I said working fine on all other pages that are identical in code apart from the bit in header. I just list below the source code produced by the include slideshow.php:

<script type="text/javascript" src="assets/js/general.js"></script><script type="text/javascript" src="assets/js/slides.js"></script><script type="text/javascript">var mygallery3=new fadeSlideShow({wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshowdimensions: [300, 225], //width/height of gallery in pixels. Should reflect dimensions of largest imageimagearray: [["slides/holiday spain.jpg", "", "", "Spain,"],["slides/atHome.jpg", "", "", "Home"]],displaymode: {type:'auto', pause:4500, cycles:0, wraparound:false},persist: false, //remember last viewed slide and recall within same session?fadeduration: 1500, //transition duration (milliseconds)descreveal: "always",togglerid: ""})</script>

Although I canno see anything wrong with it, somewhere in there or

if ($slideshow){include '/path/to/connect/file.php';mysql_set_charset('utf8', $dbc);include_once('htr/slideshow.php');}

lies the cause... I only cannot find it|-(Son

[justsomeguy]

You might want to put all of the script tags on one line. The line breaks between the script tags will get shown by the browser as spaces.

[son]

You might want to put all of the script tags on one line. The line breaks between the script tags will get shown by the browser as spaces.

I tried:

<script type="text/javascript" src="assets/js/general.js"></script><script type="text/javascript" src="assets/js/slides.js"></script><script type="text/javascript">var mygallery3=new fadeSlideShow({wrapperid: "fadeshow3", dimensions: [300, 225],imagearray: [["slides/holiday spain.jpg", "", "", "Spain,"],["slides/atHome.jpg", "", "", "Home"]],displaymode: {type:'auto', pause:4500, cycles:0, wraparound:false},persist: false,fadeduration: 1500, descreveal: "always",togglerid: ""})</script>

which did not make a difference. Is this what you meant?Son

[dsonesuk]

Try this:In firefox, right click -> Select All, right click again on any area highlighted and select View Selection Source, now look at the source shown.

[justsomeguy]

Is this what you meant?

Try the other one also, ideally your first element would start right after the last </script> tag with no space between them also. It's fine if you have space in the Javascript code, just not around the HTML tags.

<script type="text/javascript" src="assets/js/general.js"></script><script type="text/javascript" src="assets/js/slides.js"></script><script type="text/javascript">var mygallery3=new fadeSlideShow({  wrapperid: "fadeshow3",   dimensions: [300, 225],  imagearray: [["slides/holiday spain.jpg", "", "", "Spain,"],["slides/atHome.jpg", "", "", "Home"]],  displaymode: {type:'auto', pause:4500, cycles:0, wraparound:false},  persist: false,  fadeduration: 1500,   descreveal: "always",togglerid: ""})</script>

[son]

Try the other one also, ideally your first element would start right after the last </script> tag with no space between them also. It's fine if you have space in the Javascript code, just not around the HTML tags.

<script type="text/javascript" src="assets/js/general.js"></script><script type="text/javascript" src="assets/js/slides.js"></script><script type="text/javascript">var mygallery3=new fadeSlideShow({  wrapperid: "fadeshow3",   dimensions: [300, 225],  imagearray: [["slides/holiday spain.jpg", "", "", "Spain,"],["slides/atHome.jpg", "", "", "Home"]],  displaymode: {type:'auto', pause:4500, cycles:0, wraparound:false},  persist: false,  fadeduration: 1500,   descreveal: "always",togglerid: ""})</script>

Moving it all closer together and doing the select all, view selection source is now even more confusing. Although the script tags are clearly in my head section it shows now inside body tag... I am getting now really confused here... How is this possible that browser shows code in different place to the actual code? I am using Firefox...Son

[justsomeguy]

When you do view selection source, Firefox shows you the structure of what it's actually using in the DOM, not the original markup. I thought the script tags were in the body though, not the head. If they were in the head then including that code should not change the body at all. What does the complete HTML source for the entire page show?

[son]

When you do view selection source, Firefox shows you the structure of what it's actually using in the DOM, not the original markup. I thought the script tags were in the body though, not the head. If they were in the head then including that code should not change the body at all. What does the complete HTML source for the entire page show?

Trying several things I made the discovery that when I remove the include to connect to database and simply replace the dynamically generated data with the static version (just copied out of web page code) the gap does not show. This makes me think that the issue arises from file that established db connection amongst other things. Trying few things I cannot see where I did go wrong. I include the file's content below. Maybe you can spot where my error lies...

<?php # connect.php// set parameter for working environment$live = TRUE;// database access informationDEFINE ('DB_USER', 'userInfo');DEFINE ('DB_PASSWORD', 'password');DEFINE ('DB_HOST', 'localhost');DEFINE ('DB_NAME', 'dbName');	if ($dbc = mysql_connect (DB_HOST, DB_USER, DB_PASSWORD)) 	{ // establish connnection.		if (!mysql_select_db (DB_NAME,$dbc)) 		{ // if cannot select database		// handle  error			if ($live)			{			echo "The web server is experiencing technical difficulties and page cannot be displayed. We apologise for the inconvenience.";			}			else			{			die ('Info: ' . mysql_error());			}		exit();		} // End of mysql_select_db IF.	} 	else 	{ // if couldn't connect to MySQL		if ($live)		{		echo "The web server is experiencing technical difficulties and page cannot be displayed. We apologise for the inconvenience.";		}		else		{		die ('Info: ' . mysql_error());		}		exit();	} 	// function to escape the data.	function escape_data ($data) 	{		// address magic quotes.		if (ini_get('magic_quotes_gpc')) 		{		$data = stripslashes($data);		}		// check for mysql_real_escape_string() support		if (function_exists('mysql_real_escape_string')) 		{		global $dbc; // need the connection		$data = mysql_real_escape_string (trim($data), $dbc);		} 		else 			{		$data = mysql_escape_string (trim($data), $dbc);		}		// return escaped value			return $data;	} ?>

Any ideas?Son

[justsomeguy]

If that script is printing text into the head then that's a problem. Otherwise, you're going to need to check the HTML output.

[spacerules]

What browser are you using, or does it do that for all your browsers?And could you please right click a page generated by the code and post it.because my biggest problems with gaps was tables having borders if you are using tabes and putting in the document type.

[Dilated]

Just had this idea, might be a longshot, but one possibility could be that the browser is displaying the byte order mark if you saved your file encoded as utf-8. If your text editor is configured to add the BOM, it might be causing the problem. What text editor are you using?

[son]

Just had this idea, might be a longshot, but one possibility could be that the browser is displaying the byte order mark if you saved your file encoded as utf-8. If your text editor is configured to add the BOM, it might be causing the problem. What text editor are you using?

Just coming back from a holiday trip I hoped that the issues has magically resolved itself (thinking my colleagues might have had mercy on me;-)), but no! Thanks for all your input. Think Dilateds' answer brings me now closer. I did a test and copied the source code from web page and pasted into a test file that I saved with ANSI encoding. Uploading the test file I first saw a question mark inserted right at the beginning and another one before the first call to me script. The web page had the gap. Removing them in Notepad and uploading again question marks and gap disappeared. However, I need UTF-8 as there are special characters to display. I removed the BOM (is possible in Dreamweaver via Page Properties), but still have the same issue with question mark before my first script call. The other question mark at top (I suppose this was the BOM) is gone. What could could cause this and what is it? Some sort of intermittend BOM?Many thanks,SonReason for edit: Just found that there was a BOM also added to my database connection file. Removed it from there and it removed the gap! Cheers, guys. Thanks ever so much for helping me in this matter:-)