Unable to align Navigation bar with body

[TheWildHaggis]

Folks,

I am having some issues with a rather anoying and very presisten line of space in my website. Teh site can be found at nfpc dot org dot uk.

The line i am refering to is between the navigation buttons, and the main body. I would like these navigation buttons to be sitting flush on top of the body so that their is no background showing between.

I ahve tried and tried to fix this but no luck, Any ideas?

[Dubbya]

At first glance (in FireFox) and assuming you want the body to align (centered) with the header graphic, it would appear that you've got an open <div> tag somewhere but I see you've used a table based layout.

Let me take a look.

[TheWildHaggis]

Many thanks, Its more apparent in IE. The gap between the navigation and the main body is very noticeable. Where as FF it's a lot smaller.

[Dubbya]

Here's one solution:

Start by saving a duplicate of your home page for editing. Don't make any sweeping changes until after you've tested the results across all major browsers.

Open your duplicate page. Starting at approximately line 38, remove the following code:

<tr>
	<td style="text-align: center;"><center><table>
	<tr align="center">
		<td>
			<ul id="tabmenu">
				<li><a href="http://nfpc.org.uk/index.shtml" id="Home">Home</a></li>

                                <li><a href="http://nfpc.org.uk/History/Index.shtml" id="History">History</a></li>
				<li><a href="http://nfpc.org.uk/Services/Index.shtml" id="Services">Services</a></li>
                                <li><a href="http://nfpc.org.uk/Songs/Index.shtml" id="Songs">Songs</a></li>
                   		<li><a href="http://nfpc.org.uk/BoysBrigade/Index.shtml" id="BB">Boys Brigade</a></li>
				<li><a href="http://nfpc.org.uk/GirlGuids/index.shtml" id="GG">Girl Guides</a></li>
				<li><a href="http://nfpc.org.uk/Toddlers/index.shtml" id="Toddlers">Toddlers</a></li>

                                <li><a href="http://nfpc.org.uk/ContactUs/index.shtml" id="Contacts">Contact Us</a></li>
			
			</ul>
		</td>
	</tr>
</table>


</center></td>
</tr>

Then put your navigation menu into the next lower row just above the "MainArea" table. Something like this:

<table width="100%" >
<tr>
	<td style="text-align: center; margin-left:auto; margin-right:auto"><center><table class="Header" >
		<tr>
			
				<td ><img src="http://nfpc.org.uk/Imgs/logo2.jpg" height="70px" width="50px" alt="Logo" /></td>
				<td>Northfield Parish Church</td>
				<td align="right"><img src="http://nfpc.org.uk/Imgs/logo2.jpg" height="70px" width="50px" alt="Logo" /></td>

		
		</tr>
</table>
</td>
</tr>
<tr align="center">
	<td style="text-align: center; vertical-align: top;" align="center">
				<ul id="tabmenu">
				<li><a href="http://nfpc.org.uk/index.shtml" id="Home">Home</a></li>

                                <li><a href="http://nfpc.org.uk/History/Index.shtml" id="History">History</a></li>
				<li><a href="http://nfpc.org.uk/Services/Index.shtml" id="Services">Services</a></li>
                                <li><a href="http://nfpc.org.uk/Songs/Index.shtml" id="Songs">Songs</a></li>
                   		<li><a href="http://nfpc.org.uk/BoysBrigade/Index.shtml" id="BB">Boys Brigade</a></li>
				<li><a href="http://nfpc.org.uk/GirlGuids/index.shtml" id="GG">Girl Guides</a></li>
				<li><a href="http://nfpc.org.uk/Toddlers/index.shtml" id="Toddlers">Toddlers</a></li>

                                <li><a href="http://nfpc.org.uk/ContactUs/index.shtml" id="Contacts">Contact Us</a></li>
			
			</ul>
		<table class="MainArea" style="text-align: center;">

Once you've done this, save your duplicate page. Open up your CSS Stylesheet and define the #tabmenu width as 900px or whatever you want it to be. You may want to remove the bottom border at this point as the menu should be sitting atop the main content area. Make your changes and save the file.

At the very least, be sure to test the page in Internet Explorer and FireFox before replacing the code in the rest of your pages. Don't forget to delete the duplicate page when you're satisfied that all is well!

Don't hesitate to ask for more assistance and please pass along my best regards to Stella!

[TheWildHaggis]

Excellent, Good work. Im just testing it out