Why is there a gap between my body content and the top of the web page.

Posted on 2009-02-08
Last Modified: 2012-05-06

this is driving me nuts.  See example:

It must be something stupid, but I cannot find it.

Any ideas?




<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">


body {

	background-color: #006070;

	text-align: center;





<div id="mainContent">

  <table border=0 cellspacing=0 cellpadding=0 width=750 height=650>


<td><img border=0 src="Images/header_top.jpg" height=147 width=750></td>


<td><table border=0 cellspacing=0 cellpadding=0 width=750 height=21>


<td><img border=0 src="Images/spacer_1.jpg" height=21 width=11></td>

<td><a href=""><img border=0 src="Images/nav_home_hot.jpg" height=21 width=95></a></td>

<td><img border=0 src="Images/spacer_2.jpg" height=21 width=10></td>

<td><img border=0 src="Images/nav_services.jpg" height=21 width=96 onMouseOver="this.src = 'Images/nav_services_hot.jpg' " onMouseOut="this.src = 'Images/nav_services.jpg' "></td>

<td><img border=0 src="Images/spacer_3.jpg" height=21 width=9></td>

<td><img border=0 src="Images/nav_products.jpg" height=21 width=96 onMouseOver="this.src = 'Images/nav_products_hot.jpg' " onMouseOut="this.src = 'Images/nav_products.jpg' "></td>

<td><img border=0 src="Images/spacer_4.jpg" height=21 width=10></td>

<td><img border=0 src="Images/nav_downloads.jpg" height=21 width=96 onMouseOver="this.src = 'Images/nav_downloads_hot.jpg' " onMouseOut="this.src = 'Images/nav_downloads.jpg' "></td>

<td><img border=0 src="Images/spacer_5.jpg" height=21 width=9></td>

<td><a href=""><img border=0 src="Images/nav_forum.jpg" height=21 width=96 onMouseOver="this.src = 'Images/nav_forum_hot.jpg' " onMouseOut="this.src = 'Images/nav_forum.jpg' "></a></td>

<td><img border=0 src="Images/spacer_6.jpg" height=21 width=9></td>

<td><img border=0 src="Images/nav_news.jpg" height=21 width=97 onMouseOver="this.src = 'Images/nav_news_hot.jpg' " onMouseOut="this.src = 'Images/nav_news.jpg' "></td>

<td><img border=0 src="Images/spacer_7.jpg" height=21 width=9></td>

<td><a href="Contact.php"><img border=0 src="Images/nav_contact_us.jpg" height=21 width=95 onMouseOver="this.src = 'Images/nav_contact_us_hot.jpg' " onMouseOut="this.src = 'Images/nav_contact_us.jpg' "></a></td>

<td><img border=0 src="Images/spacer_8.jpg" height=21 width=12></td>




<td><img border=0 src="Images/header_bottom.jpg" height=27 width=750></td>


<td><table border=0 cellspacing=0 cellpadding=0 width=750 height=386>


<td><img border=0 src="Images/border_left.jpg" height=386 width=20></td>

<td width=710 height=386 valign="top" background="Images/body_1.jpg"></td>

<td><img border=0 src="Images/border_right.jpg" height=386 width=20></td>




<td><img border=0 src="Images/footer_top.jpg" height=47 width=750></td>


<td><table border=0 cellspacing=0 cellpadding=0 width=750 height=11>


<td><img border=0 src="Images/spacer_9.jpg" height=11 width=51></td>

<td><img border=0 src="Images/nav_company.jpg" height=11 width=54></td>

<td><img border=0 src="Images/nav_support.jpg" height=11 width=50></td>

<td><img border=0 src="Images/nav_links.jpg" height=11 width=34></td>

<td><img border=0 src="Images/nav_upcoming_events.jpg" height=11 width=100></td>

<td><img border=0 src="Images/nav_faq.jpg" height=11 width=26></td>

<td><img border=0 src="Images/nav_our_clients.jpg" height=11 width=65></td>

<td><img border=0 src="Images/nav_pictures.jpg" height=11 width=52></td>

<td><img border=0 src="Images/nav_intranet.jpg" height=11 width=50></td>

<td><img border=0 src="Images/nav_webmail.jpg" height=11 width=53></td>

<td><img border=0 src="Images/nav_site_map.jpg" height=11 width=56></td>

<td><a href="Terms.html"><img border=0 src="Images/nav_terms_and_conditions.jpg" height=11 width=116></a></td>

<td><img border=0 src="Images/spacer_10.jpg" height=11 width=43></td>




<td><img border=0 src="Images/footer_bottom.jpg" height=11 width=750></td>



	<!-- end #mainContent --></div>



Open in new window

Question by:etiennedemers
    LVL 16

    Accepted Solution

    Replace your body style like this
    body {
            background-color: #006070;
            text-align: center;
    	margin: 0;
    	padding: 0;

    Open in new window

    LVL 28

    Expert Comment

    I agree with sunithnair the browser automatically add padding on the window.

    Author Closing Comment

    Man I feel stupid. Thank you very much for your help.
    LVL 16

    Expert Comment

    You dont have to feel supid these mistakes happen to everyone :)

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Join & Write a Comment

    Suggested Solutions

    Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    733 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now