SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    php include - effects position

    Hi, this is probably really simple.

    I've just cut sections of my site into separate files and used php include to include them in the page.

    This works fine but it seems to have an effect on the position of the element I'm trying to include - it shifts it down by 22px.

    Is there a reason for this as everything worked perfectly before breaking the site into sections to include?

    I'm not sure if my code is causing it or whether its something to do with the php include statement so i'll include code on request.

    Thanks
    James

  2. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,506
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Yes, post the code.

  3. #3
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok

    here's the site live

    I'm including #header

    here's my css, notice the 5px top border on header, well that's getting turned into a 27px top border - or rather is given an offset of 22px, that's the problem.

    css (have only included relevant bits)
    Code CSS:
    html, body {
    	height: 100%;
    } 
     
    * {
    	padding: 0;
    	margin: 0;
    	border: 0;
    }
     
    * html #wrapper {
    	height: 100%;
    }
     
    body {
    	background: #FFFFFF;
    	width: 100%;
     
    }
     
    object, embed {
    	display: block;
    }
     
    iframe {
    	display: block;
    }
     
    /* Div Styles */
    /*Global*/
    #wrapper {
    	min-height: 100%;
    	min-width: 990px;
    	margin-bottom: -80px;
    	background: #FFFFFF;
    }
     
    #header {
    	position: relative;
    	height: 150px;
    	border-top: 5px solid #FFF;
    	margin: 0 auto;
    	width: 100%;
    	background: url('Images/Page/header.png') repeat-x;
    }

    here's my index.php
    Code HTML4Strict:
    <!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>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<link type="text/css" rel="stylesheet" href="page.css" />
    	<link type="text/css" rel="stylesheet" href="nav.css" />
    	<link type="text/css" rel="stylesheet" href="text.css" />
    	<link type="text/css" rel="stylesheet" href="search.css" />
    	<link type="text/css" rel="stylesheet" href="images.css" />
     
    	<script src="jquery-1.2.6.js" type="text/javascript"></script>
     
    	<script src="ui/jquery.ui.all.js" type="text/javascript"></script>
     
    	<script type="text/javascript" src="ui/preloadCssImages.jQuery_v5.js"></script>
    	<script type="text/javascript" src="swfobject.js"></script>
    	<script type="text/javascript" src="ga.js"></script>
     
    	<script type="text/javascript" src="textsizer.js"></script>
     
    	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.ats-heritage.co.uk/Testing/ats_heritage_rss_feed.xml" />
     
    	<title>ATS Heritage - Home</title>
    </head>
     
    <body onload="$(document).ready(function(){ $.preloadCssImages();});">
    	<!--Start of Wrapper-->
    	<div id="wrapper">
     
    		<!--Start of Header-->
    		<?php
    		include("_includes/header.php");
    		?>
    		<!--End of Header-->
     
    		<!--Start of Main Content-->
    		<div id="content">
     
    			<!--Start of Web Design-->
    	        <div id="webdesign">
    	       		<img class="tr" src="Images/Page/tr.jpg" alt="Top Right Rounded Corner" />
     
     
    	        	<div class="titlesection">
    	        		<h1>Web Design</h1>
    	        	</div>
     
    	        	<p>If your heritage site isn't on the web, you're missing a huge 
    				opportunity.</p>
     
    	        	<div class="extra">
    	        		<a href="webdesign.html">Learn more</a>
     
    	        	</div>
    	        	<img class="bl" src="Images/Page/bl.png" alt="Bottom Rounded Corner" />
     
    	        </div>
    	        <!--End of Web Design-->	        	        
     
    			<!--Start of News-->
    			<div id="news">
    	       		<img class="tr" src="Images/Page/tr.jpg" alt="Top Right Rounded Corner" />
     
     
    	        	<div class="titlesection">
    	        		<h1>Latest News</h1>
    	        	</div>
     
    	        	<p><strong>December 08 Tattershall Castle  </strong>ATS has 
    				been selected to take over the audioguides contract at this 
    				charming historic National Trust property.<br /><a href="news.html">
    				read more</a></p>
    	        	<p><strong>December 08 Ken Hawley Collection Trust, University 
    				of Sheffield  </strong>This university collection called ATS 
    				when it needed a period Talking Phone from ATS to make its oral 
    				history clips available to the public.<br /><a href="news.html">
    				read more</a></p>
    	        	<p><strong>December 08 Bamburgh Castle - </strong>new audiotours 
    				are being developed for this ancient Northumbrian fortress and 
    				family home to the prolific inventor, Lord Armstrong.  <br /><a href="news.html">
    				read more</a></p>
    	        	<p><strong>November 08 Cragside  </strong>the National Trust 
    				has again chosen ATS to develop an bespoke and seasonal Talking 
    				Post for the grounds of this magnificent country house built by 
    				eminent Victorian, Lord Armstrong.<br /><a href="news.html">read 
    				more</a></p>
    	        	<p class="highlight"><strong>October 08 Rochester Cathedral  </strong>
    				ATS Heritage announces an important consultancy and design 
    				project at this medieval cathedral. Forming part of the 
    				HLF-funded Ancient Stones, Untold Stories project, ATS will be 
    				realising a mix of interpretation concepts and solutions.<br /><a href="news.html">
    				read more</a></p>
     
    	        	<div class="extra">
    	        		<a href="news.html">Read all news stories</a>
    	        	</div>
    	        	<img class="bl" src="Images/Page/bl.png" alt="Bottom Rounded Corner" />
     
    	        </div>
    	        <!--End of News-->
     
    	        <!--Start of Products-->		
    			<div id="products">
     
    	        	<object width="500" height="240" type="application/x-shockwave-flash" data="Images/Flash/Products.swf">
    					<param name="movie" value="Images/Flash/Products.swf" />
    					<a href="http://www.adobe.com/products/flashplayer/">Click here to install Adobe Flash Player</a>
    				</object>
     
    	        	<div class="extra">
    	        		<ul>
    	        			<li class="blue"><a href="audioguides.html">Audio Guide</a></li>
    	        			<li class="purple"><a href="videoguides.html">Video 
    						Guide</a></li>
    	        			<li class="green"><a href="downloadcentre.html">Download 
    						Centre</a></li>
    	        			<li class="pink"><a href="talkingboxes.html">Talking Box</a></li>
    	        			<li class="aqua"><a href="talkingboxes.html">Audio Post</a></li>
    	        		</ul>
     
    	        	</div>
    	        	<img class="bl" src="Images/Page/bl.png" alt="Bottom Rounded Corner" />
     
    	        </div>
    	        <!--End of Products-->
     
    	        <!--Start of Rec-->
    	        <div id="rec">
    	       		<img class="tr" src="Images/Page/tr.jpg" alt="Top Right Rounded Corner" />
     
    	        	<div class="titlesection">
    	        		<h1>Recording</h1>
    	        	</div>
     
    	        	<ul>
    	        		<li><a href="recording.html">In-House Studio</a></li>
    	        		<li><a href="recording.html">Translation</a></li>
    	        		<li><a href="recording.html">Studio Rental</a></li>
    	        	</ul>
     
    	        	<div class="extra">
     
    	        	</div>
    	        	<img class="bl" src="Images/Page/bl.png" alt="Bottom Rounded Corner" />
     
    	        </div>
    	        <!--End of Rec-->
     
    	        <!--Start of Film-->
    	        <div id="film">
    	       		<img class="tr" src="Images/Page/tr.jpg" alt="Top Right Rounded Corner" />
     
    	        	<div class="titlesection">
    	        		<h1>Film</h1>
    	        	</div>
     
    	        	<p>With a <strong>BBC trained</strong> camera crew, we are able 
    				to provide high definition video for use in many applications 
    				from fixed projection, to handheld mediaplayers.<br />Our 
    				dynamic and creative team will breathe new life into any 
    				subject.</p>
     
    	        	<div class="extra">
    	        		<a href="film.html">View our Showreel</a>
    	        	</div>
    	        	<img class="bl" src="Images/Page/bl.png" alt="Bottom Rounded Corner" />
     
    	        </div>
    	        <!--End of Film-->
     
    	        <!--Start of History-->
    	        <div id="history">
    	       		<img class="tr" src="Images/Page/tr.jpg" alt="Top Right Rounded Corner" />
     
    	        	<div class="titlesection">
    	        		<h1>Oral History</h1>
    	        	</div>
     
    	        	<object width="210" height="130" type="application/x-shockwave-flash" data="Images/Flash/History.swf">
    					<param name="movie" value="Images/Flash/History.swf" />
    					<a href="http://www.adobe.com/products/flashplayer/">Click here to install Adobe Flash Player</a>
    				</object>
     
    	        	<div class="extra">
    	        		<a href="history.html">Click here to read more</a>
     
    	        	</div>
    	        	<img class="bl" src="Images/Page/bl.png" alt="Bottom Rounded Corner" />
     
    	        </div>
    	        <!--End of History-->
     
    	        <!--Start of Access-->
    	        <div id="access">
    	       		<img class="tr" src="Images/Page/tr.jpg" alt="Top Right Rounded Corner" />
     
    	        	<div class="titlesection">
    	        		<h1>Accessibility</h1>
    	        	</div>
     
    	        	<object width="210" height="130" type="application/x-shockwave-flash" data="Images/Flash/Accessability.swf">
    					<param name="movie" value="Images/Flash/Accessability.swf" />
    					<a href="http://www.adobe.com/products/flashplayer/">Click here to install Adobe Flash Player</a>
    				</object>	
     
    	        	<div class="extra">
    	        		<a href="access.html">Access Solutions</a>        		
    	        	</div>
    	        	<img class="bl" src="Images/Page/bl.png" alt="Bottom Rounded Corner" />
     
    	        </div>
    	        <!--End of Access-->
     
    	        <!--Start of Clients-->
    	        <div id="clients">
    	       		<img class="tr" src="Images/Page/tr.jpg" alt="Top Right Rounded Corner" />
     
    	        	<div class="titlesection">
    	        		<h1>Example Work</h1>
    	        	</div>
     
    	        	<div id="clients_left">
     
    		        	<p><a href="showreel.html" name="osterley"><img class="mediatype" src="Images/Page/videosymbol.png" alt="Video Symbol" />Osterley 
    					Park</a></p>
    		        	<p class="focus"><a href="showreel.html" name="stockwood"><img class="mediatype" src="Images/Page/videosymbol.png" alt="Video Symbol" />Stockwood 
    					Discovery Cernter</a></p>
    		        	<p><a href="showreel.html" name="victory"><img class="mediatype" src="Images/Page/videosymbol.png" alt="Video Symbol" />HMS 
    					Victory</a></p>
    		        	<p class="focus"><a href="showreel.html" name="warwick"><img class="mediatype" src="Images/Page/videosymbol.png" alt="Video Symbol" />Warwick 
    					Castle</a></p>
    		        	<p><a href="showreel.html" name="hever"><img class="mediatype" src="Images/Page/audiosymbol.png" alt="Audio Symbol" />Hever 
    					Castle</a></p>
    		        	<p class="focus"><a href="showreel.html" name="rochester"><img class="mediatype" src="Images/Page/videosymbol.png" alt="Video Symbol" />Rochester 
    					Castle</a></p>
    				</div>
     
    				<div id="clients_right">
    					<p class="focus"><a href="showreel.html" name="maryrose"><img class="mediatype" src="Images/Page/audiosymbol.png" alt="Audio Symbol" />Mary 
    					Rose</a></p>
    		        	<p><a href="showreel.html" name="stockwood"><img class="mediatype" src="Images/Page/videosymbol.png" alt="Video Symbol" />Stockwood 
    					Discovery Cernter</a></p>
    		        	<p class="focus"><a href="showreel.html" name="victory"><img class="mediatype" src="Images/Page/videosymbol.png" alt="Video Symbol" />HMS 
    					Victory</a></p>
    		        	<p><a href="showreel.html" name="warwick"><img class="mediatype" src="Images/Page/videosymbol.png" alt="Video Symbol" />Warwick 
    					Castle</a></p>
    		        	<p class="focus"><a href="showreel.html" name="hever"><img class="mediatype" src="Images/Page/audiosymbol.png" alt="Audio Symbol" />Hever 
    					Castle</a></p>
    		        	<p><a href="showreel.html" name="rochester"><img class="mediatype" src="Images/Page/videosymbol.png" alt="Video Symbol" />Rochester 
    					Castle</a></p>			
    				</div>
     
     
    	        	<div class="extra">
    	        		<a href="showreel.html">View all</a>
    	        	</div>
    	        	<img class="bl" src="Images/Page/bl.png" alt="Bottom Rounded Corner" />
     
    	        </div>
    	        <!--End of Clients-->
     
    	        <!--Start of Audio-->
    	        <div id="audio">
    	       		<img class="tr" src="Images/Page/tr.png" alt="Top Right Rounded Corner" />
     
    	        	<a href="audioguides.html"><img src="Images/Page/audio.png" alt="Audio Guides" /></a>
     
    	        	<div class="extra">
    	        		<a href="audioguides.html">Audio Guides &amp; Tours</a>
    	        	</div>
    	        	<img class="bl" src="Images/Page/bl.png" alt="Bottom Rounded Corner" />
     
    	        </div>
    	        <!--End of Audio-->
     
    	        <!--Start of Multimedia-->
    	        <div id="multimedia">
    	       		<img class="tr" src="Images/Page/tr.png" alt="Top Right Rounded Corner" />
     
    	        	<a href="videoguides.html"><img src="Images/Page/multimedia.png" alt="Video Guides" /></a>
     
    	        	<div class="extra">
    	        		<a href="videoguides.html">Multimedia Guides &amp; Tours</a>
    	        	</div>
    	        	<img class="bl" src="Images/Page/bl.png" alt="Bottom Rounded Corner" />
     
    	        </div>
    	        <!--End of Multimedia-->
     
    		</div>
    		<!--End of Main Content-->
     
    		<!--Start of Clear Footer-->
    		<div id="clearfooter">
    		</div>
    		<!--End of Clear Footer-->
     
     
    	</div>
    	<!--End of Wrapper-->
     
    	<!--Start of Footer-->
    	<div id="footer">
    		<p><a href="terms.html">Terms &amp; Conditions</a> | © 2008 Advanced 
    		Thinking Systems</p>
    	</div>
    	<!--End of Footer-->
    </body>
     
    </html>

    and here's the #header that i'm including
    Code HTML4Strict:
    <div id="header">
    	<a href="index.html"><img id="logo" src="Images/Page/Heritage_logo.png" alt="ATS Heritage Logo" /></a>
     
    	<div>	
    		<div id="clock">				
    			<object width="275" height="20" type="application/x-shockwave-flash" data="Images/Flash/Clock.swf">
    				<param name="movie" value="Images/Flash/Clock.swf" />
    				<param name="wmode" value="transparent" />
    				<a href="http://www.adobe.com/products/flashplayer/">Click here to install Adobe Flash Player</a>
    			</object>
    		</div>	
     
    		<form action="http://www.google.com/cse" id="cse-search-box">
    			<div id="searchbox">
    			    <input type="hidden" name="cx" value="009667969267694739887:qpug_56sje0" />
    			    <input type="hidden" name="ie" value="UTF-8" />
    			    <input class="textbox" type="text" name="q" size="31" />
    			</div>
     
    			<input class="search" type="submit" name="sa" value="Search" />
     
    		</form>
     
    		<ul id="nav_extra">
    			<li><a href="about.html">About Us</a></li>
    			<li><a href="contact.html">Contact Us</a></li>
    		</ul>
     
    		<ul id="rss">
    				<li><a href="ats_heritage_rss_feed.xml"><img src="Images/Page/rss.png" alt="Rss Feed" /></a></li>
    				<li><a href="http://del.icio.us/post?url=www.ats-heritage.co.uk&amp;title=ATS Heritage"><img src="Images/Page/delicious.png" alt="Add to Del.icio.us" /></a></li>
    				<li><a href="http://digg.com/submit?phase=2&amp;url=www.ats-heritage.co.uk&amp;title=ATS Heritage"><img src="Images/Page/digg.png" alt="Digg This" /></a></li>
    		</ul>
     
    	</div>
     
    	<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en;"></script>
     
    	<img id="pentagons" src="Images/Page/pentagons.png" alt="ATS Pentagons Logo" />
     
     
     
    	<!--Start of Nav-->
    	<div id="nav">
     
    		<!--Start of Rounded Corners-->
    		<img id="nav_topcorner" src="Images/Page/top_rounded corner.png" alt="Top Rounded Corner" />
    		<img id="nav_bottomcorner" src="Images/Page/bottom_rounded corner.png" alt="Bottom Rounded Corner" />
    		<!--End of Rounded Corners-->
     
    		<!--Start of Nav ul-->
    		<ul>
    			<li><a href="index.html">Home</a></li>
    			<li><a href="news.html">News</a></li>
    			<li>
    				<p>Products</p>
    				<ul>
    					<li><a href="audioguides.html">Audio Guides</a></li>
    					<li><a href="videoguides.html">Video Guides</a></li>
    					<li><a href="downloadcentre.html">Download Centre</a></li>
    					<li><a href="talkingboxes.html">Talking Boxes</a></li>
    					<li><a href="talkingboxes.html">Audio Posts</a></li>
    					<li><a href="oralhistory.html">Oral History</a></li>
    				</ul>
    			</li>
    			<li>
    				<p>Multimedia Services</p>
    				<ul>
    					<li><a href="recording.html">Recording &amp; Translation</a></li>
    					<li><a href="film.html">Video &amp; Animation</a></li>
    					<li><a href="webdesign.html">Web Design</a></li>
    					<li><a href="data.html">Database Design</a></li>
    					<li><a href="interactive.html">Interactive Multimedia</a></li>
    				</ul>
     
    			</li>
     
    			<li><a href="access.html">Access</a></li>
    			<li><a href="quote.php">Quote</a></li>
    		</ul>				
    		<!--End of Nav ul-->
     
    	</div>
    	<!--End of Nav-->
     
    </div>

    Thanks

  4. #4
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,506
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Using Firebug, I can see that your header div has a top margin of 5px, and a top offset of 22px. No idea why, though, sorry.
    And it doesn't happen when you put the content of header.php in the index.php?

  5. #5
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No it works fine when its all in index.php

    I did split nav into a seperate php file and the same happened there, it was given an offset of 22px.

  6. #6
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try to put it into a function and call it where you want, it works fine for me.

  7. #7
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've botched it to work by giving header

    top: -22px

    although not ideal it serves its purpose, if anyone has any ideas, throw them my way as I'd like to get it to work without hacking it up.

    @ silvercrow - it works ok as i added that -22px, using a function on it's own seems to make no difference.

  8. #8
    Web Professional
    Join Date
    Oct 2008
    Location
    London
    Posts
    862
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ha! This one took me a moment to crack. Tricky stuff.

    You are saving your UTF files with BOM. That BOM at the beginning of your header file causes a line-break. Save your files without BOM (check your editor's settings).

    If you don't know what I'm talking about then change your browser's character encoding to ISO8859-1 and you'll see the BOM characters taking up the 22px.

    EDIT: Only Opera and Safari correctly ignore BOM (thus with your current top: -22px solution render the header -22px off screen). In IE8, Chrome and FF3 it causes a line-break.

  9. #9
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    right ok, yea if i have the char encoding set to iso8859-1 i see the bom marks, i opened my header.php in notepad and I cant see the bom marks at the top...should I be able to see them?

  10. #10
    Web Professional
    Join Date
    Oct 2008
    Location
    London
    Posts
    862
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No because it by default uses UTF-8. You will need to use an editor which will allow you to save without BOM like Notepad++.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •