Odd spacing thing going on with menu

Odd spacing thing going on with menu (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility

Message

Jordan -> Odd spacing thing going on with menu (8/16/2009 19:15:26)

I've got a very simple list-style menu for this site. The problem I'm wrestling with is when the menu is included with ssi, I get extra space at the top of the navigation.

This file has the menu included in the html. There is a 1px border at the top. Everything looks as it should. http://www.quakerparenting.org/test.shtml

This file has the menu inserted with ssi. There's extra space at the top of the navigation that should not be there. http://www.quakerparenting.org/index-test.shtml

The include file has the following code in it:

<div id="navigation">
<ul>
		<li><a href="http://www.quakerparenting.org/index.shtml">Home</a></li>
		<li><a href="http://www.quakerparenting.org/parents/index.shtml">Parents</a></li>
		<li><a href="http://www.quakerparenting.org/grandparents/index.shtml">Grandparents</a></li>
		<li><a href="http://www.quakerparenting.org/meetings/index.shtml">Meetings</a></li>
		<li><a href="http://www.quakerparenting.org/schools/index.shtml">Schools</a></li>
		<li><a href="http://www.quakerparenting.org/offerin/index.shtml">Offerings</a></li>				
		<li><a href="http://www.quakerparenting.org/about/index.shtml">About Us</a></li>				
        <li><a href="http://www.quakerparenting.org/contact/index.shtml">Contact Us</a></li>						
</ul>
</div>

This is the style sheet code for the navigation:

#iMenu {
	width: 760px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Navigation */
#navigation {
	background-color: #660000;
	border-top: 1px #FFFFFF solid;
	background-color: #660000;
}
html>body #navigation {
	overflow: hidden;
}
#navigation ul {
	list-style-type: none;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #670001;
}
#navigation li {
	float: left;
}
#navigation a {
	border-right: 1px #808080 solid;
	font-weight: normal;
	text-decoration: none;
	color: #ffffff;
	padding: 5px 15px 5px 15px;
	background-color: #660000;
	display: block;
}
#navigation a:hover {
	border-right: 1px #808080 solid;
	font-weight: normal;
	text-decoration: none;
	color: #333333;
	background-color: #ffcc33;
}

I've played with this on and off for two days and am going nuts. Any advice would be greatly appreciated.

Tailslide -> RE: Odd spacing thing going on with menu (8/17/2009 1:32:43)
What browser is this happening in as I'm not seeing any difference...

d a v e -> RE: Odd spacing thing going on with menu (8/17/2009 4:28:41)
i see it in firefox 3.5.2 on windows - a space of about 20 px

Tailslide -> RE: Odd spacing thing going on with menu (8/17/2009 6:23:36)
Couldn't see it on Camino. On FF it's there though... Congratulations - you've won the "Weird problem of the week award"!!! How strange is that! I'm assuming that there's nothing else in the ssi itself apart from the HTML for the menu? Try removing all the whitespace around the menu -see if that helps. Freaky!

Jordan -> RE: Odd spacing thing going on with menu (8/17/2009 9:30:40)
I'm using FireFox, but I do see this in IE 8 (regular and compatibility mode) and Chrome. Haven't checked it in IE7 yet. The only place it looks normal is Opera 9.6.4. Correct, there is nothing else in the menu include file. I just tried removing the 1px border all together and received the same results. Tried adding it to the bottom of the header instead of the nav - same results. It seems to have more to do with the ssi include which is coded like this: <!--#include virtual="includes/topmenu.htm" --> I've tried changing the file extension of the ssi file (.htm, .shtml, .txt, .ssi) all with no change in the end result. Weird and driving me around the bend.

TexasWebDevelopers -> RE: Odd spacing thing going on with menu (8/17/2009 9:36:11)
This should not make a difference but I've seen weirder things happen--include the page as a file instead of virtual. If that doesn't make a difference then try renaming the file with the suffix .inc: <!--#include file="includes/topmenu.htm" --> <!--#include file="includes/topmenu.inc" -->

Jordan -> RE: Odd spacing thing going on with menu (8/17/2009 10:08:56)
I did try "file" rather than "virtual" early on and that broke things all together. I just tried the .inc extension for the include file and have the same results. Thanks for the suggestions!

Page: [1]

0.0625