SSI spacing problem - can't figure out

simcoweb · January 19, 2010

I'm using SSI to insert a common menu into a site template. The menu HTML is a stand ul list stylized with CSS to create the horizontal navigation bar. Here's the problem.

When I insert the menu via an SSI tag like so:

It also creates a space above the menu when it displays. Like a hard return. There's no visible code or <p> tag or anything else that would cause this. If I remove the SSI tag and replace it with the actual code for the menu then the space disappears.

Here's the view without the SSI file:

http://www.simcomedia.com/pavia/index9.html

Here's the view WITH the SSI tag:

http://www.simcomedia.com/pavia/index9ssi.html

Notice the menu now has a gap above it. Same code as without the SSI but for some oddball reason it wants to move it down.

Ideas anyone?

haku · January 20, 2010

Show us the code for everything in the wrapper div.

simcoweb · January 20, 2010

Not sure if I understand your request completely but here's a couple of things. The wrapper div CSS is:

#wrapper {

width: 960px;

margin: auto;

padding: 0;

min-height: 100%;

background-color: #fff;

}

The entire HTML/CSS layout for that page is:

<!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" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Pavia Systems</title>
<meta http-equiv="Content-Language" content="en-us" />

<meta name="author" content="Niall Doherty" />

<!-- Begin Stylesheets -->

	<link rel="stylesheet" href="stylesheets/pavia-main.css" type="text/css" media="screen" />
<!-- End Stylesheets -->

</head>

<body>
<div id="wrapper">
<div id="gradheader2">
<a class="logo" href="http://www.paviasystems.com"><img src="images/trans-logo.png" alt="Pavia Systems" height="65" width="341"/></a>
	<div class="searchbox">
	<label>Search:</label>
		<input type="text" value="enter keywords" name="search" id="search" style="height: 15px; width: 150px;"/> <img src="images/search.png" alt=""/> 
	</div><!-- end of search box -->
</div><!-- end of gradheader -->
<!--#include virtual="pavia-menu.html" -->
<div id="slider">
	<div class="summary">
			<h3>Are Your Crews <span class="roadready">RoadReady</span><span class="copyright">®</span> ?</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
			<br/><br/><a class="slider" rel="external" href="#">Read full story ...</a>
			</p>
			</div>
</div><!-- end of slider container -->
<div id="clear"></div>
<div id="content">

	<div id="centermain">
		<div id="mainleft">

		<p><img src="images/biz-couple.jpg" height="100" width="100" alt="" class="imageLeft"/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu eleifend sit amet, condimentum ac massa. Maecenas at diam eu est scelerisque facilisis id sit.
		<br/><br/><a class="slider" rel="external" href="#">Read full story ...</a>
		</p></div>
		<div id="mainright">

		<p>Click on the image below to view a sample animation from our online courses:</p>
		<p align="center"><a href="#"><img src="images/video-sample.jpg" alt="" height="135" width="175"/></a></p>
		</div>

	</div><!-- end of center main -->

	<div class="overview">
		<fieldset>
			<legend>Need To Attend Training?</legend>
			<p>For registered members enter your username and password below to access your online courses.</p>
			<form action="login.php"> 
		<label for="username">Username:</label> <input type="text" value="" name="username" id="username"/><br/> <br/>
		<label for="password">Password:</label> <input type="text" value="" name="password" id="password"/><br/>
		<div style="text-align: center;"><input type="button" class="btn" value="Login" name="login"/></div>
		</form>
		<p><a class="reg" href="#">Create New Account</a> · <a class="reg" href="#">Forgot Password?</a>
		</p>
		</fieldset>

	</div><!-- end of overview -->
	<img src="images/courses-banner.jpg" alt="" width="800" height="40" style="margin-left: 20px; margin-bottom: 10px;"/>
<div id="productswrapper">
	<div id="productstop"><img src="images/book-contractor.jpg" alt="" height="128" width="128" style="float: left; margin-right: 20px;"/>
	<span class="producttitle">Contractor</span><br/>
		<span class="productstagline">Operator, Technician and Management Training</span>
	</div>
		<div id="productsmid">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu eleifend sit amet, condimentum ac massa. Maecenas at diam eu est scelerisque facilisis id sit amet ligula.
		</div>
		<div class="productsbottom">
		<div class="productslink"><a rel="info" href="#">Information...</a></div>
		</div>
</div><!-- end of products wrapper -->

<div id="productswrapper">
	<div id="productstop"><img src="images/book-agency.jpg" alt="" height="128" width="128" style="float: left; margin-right: 20px;"/>
	<span class="producttitle">Agency</span><br/>
		<span class="productstagline">Inspector, Technician and Engineer Training</span>
	</div>
		<div id="productsmid">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu eleifend sit amet, condimentum ac massa. Maecenas at diam eu est scelerisque facilisis id sit amet ligula. 
		</div>
		<div class="productsbottom">
		<div class="productslink"><a rel="info" href="#">Information...</a></div>
		</div>
</div><!-- end of products wrapper -->

<div id="productswrapper">
	<div id="productstop"><img src="images/book-equipment.jpg" alt="" height="128" width="128" style="float: left; margin-right: 20px;"/>
	<span class="producttitle2">Equipment<br/>Manufacturer</span><br/>
	<span class="productstagline">Customer, Sales and Support Training</span>
	</div>
		<div id="productsmid">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu eleifend sit amet, condimentum ac massa. Maecenas at diam eu est scelerisque facilisis id sit amet ligula. 
		</div>
		<div class="productsbottom">
		<div class="productslink"><a rel="info" href="#">Information...</a></div>
		</div>
</div><!-- end of products wrapper -->
<div id="clear"></div>
</div><!-- end of content -->
<div id="footer">
	<div class="contactdiv">
	<span class="questions">Questions? Call us:</span><br/>
	<span class="phone">206.428.3094</span>
	<br/>

	</div>

</div><!-- end of footer -->

</div><!-- end of wrapper -->
<div id="bottom">
<span class="terms"><a href="#">Terms Of Use</a> | <a href="#">Privacy Policy</a></span>
</div>
</body>
</html>

haku · January 20, 2010

Try changing this:

</div><!-- end of gradheader -->
<!--#include virtual="pavia-menu.html" -->
   <div id="slider">

to this:

</div><!-- end of gradheader --><!--#include virtual="pavia-menu.html" --><div id="slider">

I think that should fix it.

simcoweb · January 20, 2010

Thanks for your response and suggestion. Unfortunately it didn't work.

I've never known SSI to somehow produce a line break. If I look at the page in FireFox and use the FireBug plugin to check the HTML/CSS it displays a gap in the code. See the screenshot i've attached, in the code box at the bottom you can see the gap between divs. If you've used FireBug you mouse over the CSS elements and it highlights the section in the page area above. When I mouse over that blank spot the 'wrapper' div highlights. Why? Who knows. There's no open or broken tags. This is a weird one.

If I use a PHP include statement it looks fine. I don't want to have to convert all the pages to PHP, however.

Ideas?

[attachment deleted by admin]

haku · January 21, 2010

It's not the include statements that cause the line break, it's that the statements, even though they are not rendered by the server as an element, are still an element, and so the whitespace on either side of them becomes a space character ( ), which causes the line break.

Make sure you have no whitespace on either side of any of your includes. It worked for me when I tried it on your page.

simcoweb · January 21, 2010

Ok, i'll definitely go through it and strip out any hidden whitespace characters and report back. Thanks!

simcoweb · February 18, 2010

Haku, I've still not solved this. I have viewed the raw code in DreamWeaver CS3 showing all hidden characters, removed them all, removed all indentation, returns, etc. and placed the code in a continuous string with no breaks. Plus, removed the space that was in my ssi include statement

was:

now:

and see nothing that would create the gap. There's no white spaces or characters. When you got it to work without the gap can you provide me with that section of the HTML you changed to accomplish that?

The links to the sample page(s) are still the same as the original post.

haku · February 19, 2010

Your non-ssi page link is dead, but that's ok.

I changed this:

<div class="menu"> <ul><li><a href="index.html">Home</a></li>

to this:

<div class="menu"><ul><li><a href="index.html">Home</a></li>

Notice that I took out a space between the div and the ul.

Show me the code surrounding the SSI code, and I'll show you how to change it.

isedeasy · February 19, 2010

I had an issue like this once and I think it was down to the encoding of the ssi file. Try encoding it as UTF-8 without BOM.

Sign In

SSI spacing problem - can't figure out

Recommended Posts

simcoweb

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

simcoweb

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

simcoweb

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

simcoweb

Link to comment

Share on other sites

simcoweb

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

isedeasy

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information