Unwanted gap in header

hello
I have a website at http://www.jonestownstables.com/ that has a gap in the header and I have not been able to remove the gap. I have a header container division with the header and a header top and bottom division. I use the top and bottom divisions to put a graphic with rounded corners on the header. I cannot figure out why the top graphic has a gap between itself and the header. I want to remove this. Thank you for your time.
Below is my html and css.
<!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" />

<title>Jonestown Stables, horses trained for enjoyable smooth riding</title>
<meta name="description" content="Horses for sale,Tennessee Walking Horses,Gaited Horses,horses for sale in north carolina,twh NC,">
<meta name="keywords" content="Tennessee Walking Horses,twh,pleasure horses,show horse,tennessee walking horse,tennessee walker,Horses for Sale,Walkers,Gaited Horses,Horse,trail horse,trail horses">


<link href="../jonestown-stables-styles.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="header_cont">
<div id="header_top"><img src="/images/top-header copy.jpg" width="720" height="12" /></div>
<div id="header">
    <h1>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','220','height','210','hspace','12','align','right','title','Quality Tennessee Walking Horses','src','/horse_animation','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','/horse_animation' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="220" height="210" hspace="12" align="right" title="Quality Tennessee Walking Horses">
<param name="movie" value="/horse_animation.swf" />
<param name="quality" value="high" />
<embed src="/horse_animation.swf" width="220" height="210" hspace="12" align="right" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
</object></noscript>
Jonestown Stables, Quality Tennessee Walking Horses, Pleasure Horses and Show Horses</h1>
    <h2><br />
      1625 Jonestown Road<br />
      Winston Salem, NC 27103<br />
      Call Us - (336) 418-3679</h2>
</div>

<div id="header_bot"><img src="/images/bot-header copy.jpg" width="720" height="12" align="left" /></div>
</div>

<div id="sidebar_cont">
<div id="sidebar_top"><img src="/images/sidebar_top copy.jpg" width="204" height="12" /></div>
<div id="sidebar">
<h2>See some of our horses</h2>
<a href="tennessee-walking-horse-1.html">Houdini</a><br />
<a href="pleasure-horse-1.html">My Citizen Kane</a><br />
<a href="../show-horse-1.html">Threat Matrix</a><br />
<a href="/trail-horse-1.html">Therapist</a><br />
<a href="/firestone.html">Firestone</a><br />
<br />
<a href="index.html">Home Page</a><br />
<br />
<a href="tennessee-walking-horses-location.html">Location/Directions</a><br />
<br />
<a href="http://www.ncwha.org/"><img src="/images/ncwha logo.gif" alt="North Carolina Walking Horse Association" width="160" height="84" hspace="12" /></a><br />
</div>

<div id="sidebar_bot"><img src="/images/sidebar_bot copy.jpg" width="224" height="12" /></div>
</div> 
<div id="content_frame">
<div id="content_cont">
<div id="content_top"><img src="/images/tr-gray.jpg" width="12" height="12" align="right" /><img src="/images/tl-gray.jpg" width="12" height="12" align="left" /></div>

<div id="content">
    <h1><img src="file:///C|/Users/Bernie/Documents/Edgewood Farm Website/images/april 09 011_cropped.jpg" width="200" height="192" hspace="10" align="right" />Welcome to Jonestown Stables Website<br />
      <br />
    </h1>
    <p>Our goal is to train horses to be excellent Tennessee Walking horses, pleasure and show horses. We spend time riding and training all of our horses to determine their personalities   and abilities. We train our horses in the proper gait for comfortable and enjoyable riding. <br />
      <br />
    We have many years of experience in training horses. </p>
</div>


<div id="content_bot"><img src="/images/bl-gray copy.jpg" width="12" height="12" align="left" /><a href="mailto:[email protected]"></a><img src="/images/br-gray copy.jpg" width="12" height="12" align="right" /></div>
</div>
<div align="center">

<a href="mailto:[email protected]">© APS 2009</a></div>
</div>

</div>

</body>
</html>
@charset "utf-8";
body {
background-color: #660000;
margin: 0em;
padding: 0em;
#wrapper {
width: 46em;
margin: .5em auto;
padding: 0.5em;
font-family: Geneva, Arial, Helvetica, sans-serif;
background-color: #ccc;
#sidebar {
width: 12.75em;
background-color: #FFFFFF;
padding: 0.5em;
border-left: .125em solid #600;
border-right: .125em solid #600;
#sidebar_top {
height: .75em;
#sidebar_top img {
width: 14em;
#sidebar_bot {
height: 0.75em;
#sidebar_bot img {
width: 14em;
#sidebar_cont {
float: left;
clear: left;
margin-top: 1em;
#sidebar h2 {
font-size: 1em;
text-decoration: underline;
color: #600;
#sidebar a {
color: #600;
font-size: 0.875em;
text-align: left;
padding: 0.125em .5em;
line-height: 1.5em;
text-decoration: underline;
#sidebar a:link, #sidebar a:visited {
color: #600;
#sidebar a:hover {
background-color: #600;
color: #fff;
font-weight: bold;
#content {
background-color: #ffffdd;
padding: 0.5em;
#content h1 {
font-size: 1.375em;
text-decoration: underline;
text-align: left;
#content p {
font-size: 1em;
text-align: justify;
#content_cont {
margin-bottom: .25em;
#content_top {
height: 0.75em;
background-color: #ffd;
#content_bot {
height: 0.75em;
background-color: #ffd;
#content_frame {
background-color: #999;
padding: 0.5em;
margin-left: 14.25em;
margin-top: 0.25em;
#content_frame a {
color: #600;
text-align: center;
font-size: 0.625em;
padding: .375em;
#header {
background-color: #FFFFdd;
height: 15em;
border-left: .125em solid #600;
border-right: .125em solid #600;
#header h1 {
font-size: 1.5em;
margin-left: 0.5em;
text-align: justify;
#header h2 {
font-size: 1.125em;
margin-left: .5em;
#header_cont {
margin-bottom: 0.5em;
#header_bot {
height: 0.75em;
background-color: #ffd;
#header_bot img {
width: 46em;
#header_top {
height: 0.75em;
background-color: #ffd;
#header_top img {
width: 46em;

I thought I did that but apparently I didn't. It worked. thank you

Similar Messages

Jog / Unwanted Spacing in Header

Using Dreamweaver CS3 I have encountered either a browser bug or error (the latter on my part).
On the web site I built (http://www.PaulRussell.net) there are unwanted gaps with a header cell. The gaps are both at the top and bottom of the cell exposing the background used for the page.
You can see it here on the image below (the area of crimson banding):
In Dreamweaver preview the cell with the crimson color fills the entire cell. When viewed in any browser the gaps (top and bottom) appear. At first this only happened in Firefox but then when I.E. upgraded the gaps began apearing in that browser platform as well.
I've checked all CSS rules and cell dimensions; all is correct.
Thoughts? Suggestions?
Thank you.
http://www.PaulRussell.net

Gary -
The OP said:
there are unwanted gaps with a header cell. The gaps are both
at the top and bottom of the cell exposing the background used for the
page....You can see it here on the image below (the area of crimson banding):
E. Michael Brandt
www.divahtml.com
www.divahtml.com/products/scripts_dreamweaver_extensions.php
Standards-compliant scripts and Dreamweaver Extensions
www.valleywebdesigns.com/vwd_Vdw.asp
JustSo PictureWindow
JustSo PhotoAlbum, et alia

Burning: Help with unwanted gaps

Can someone please help with a problem that's only recently occured when burning CDs. When burning playlists that feature linked tracks, I have found that gaps are still being included, despite the fact that I have selected 'none' in preferences. I have checked and double-checked this, but the same thing keeps happening - unwanted gaps between tracks! Any ideas?
Thanks!

iTunes has a preference to set the gap between tracks to "none," which I gather you have already done. However, it does not have the ability to detect and remove silence from the beginning and end of tracks. Is that what you are hearing? If so, you may wish to try a more competent burning program, such as Nero, which can automatically remove silence.

Strange gaps in Header and Footer

Im getting gaps in the header and footer on some of my pages. Sometimes the gaps are filled with the background color of the colomn and other times they are the body color which is even weirder. An example link would be http://www.mojogar.com/pcRepair.aspx . In IE8 I get a gap on top but not the bottom. In Firefox3 the gap is on the bottom and not the top. ???
here is the markup page; (followed by the CSS)
<%@ Page Language="VB" ContentType="text/html" %>
<!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" />

<title>Untitled Document</title>



<link href="thrColHybHdr.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body class="thrColHybHdr">
<div id="container">
<div id="header">
    
    <div class="fltlft"><img src="images/mojoLogoSmall.png" alt="Mojogar digital design & PC repair" width="172" height="41" border="0" usemap="#Map" />
      <map name="Map" id="Map">
        <area shape="rect" coords="2,2,172,39" href="default.html" target="_self" alt="Mojogar Home" />
      </map>
    </div>
<div class="fltrt">HeadRight
</div>
<div class="MenuVertDiv">
    <ul id="MenuBar2" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu" href="#">Design</a>
        <ul>
          <li><a href="webDesign.aspx">Website Design</a></li>
          <li><a href="webDev.aspx">Website Development</a></li>
<li><a href="logo.aspx">Logo Design</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Animation</a>
        <ul>
          <li><a href="webDev.aspx">Flash Animation</a></li>
</ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">Support</a>
        <ul>
          <li><a href="pcRepair.aspx">PC Repair</a>            </li>
          <li><a href="virus.aspx">Virus</a></li>
          <li><a href="email.aspx">Email</a></li>
          <li><a href="backup.aspx">Data Backup</a></li>
          <li><a href="wireless.aspx">Wireless</a></li>
          <li><a href="software.aspx">Software</a></li>
          <li><a href="hardwareInstall.aspx">Hardware</a></li>
<li><a href="server.aspx">Server Repair</a></li>
<li><a href="busConsult.aspx">Consulting</a></li>
        </ul>
      </li>
      <li><a href="contact.aspx">Contact</a></li>
    </ul>
</div>
</div>
<div class="masterBackground">
<div id="sidebar2">
    
<div id="sidebar2">
    <h4>When your computer is having troubles, have a Professional look over your system to update or repair your operating system, audit the installed programs, and check for viruses and other malware.</h4>
    
</div>

    
</div>
<div id="mainContent">
    
<div id="mainContent">
    <div class="MarginTopZero">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="580" height="300" title="Computer Support">
      <param name="movie" value="images/flash/PCCollage.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <embed src="images/flash/PCCollage.swf" quality="high" wmode="opaque" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="580" height="300"></embed>
    </object></div>
    <h2>Don't feel alone when your computer breaks. Computer problems can leave you in the dark about what is wrong. Help is a call away.</h2>
    <h4>Our tune-up and repair service consists of the following;</h4>
<li>Operating system updates</li>
    <h5>Operating system updates help the security of the computer and can add features that the manufacturer has been working on to make the life of the end user easier. Updates come out as frequently as every couple weeks on some operating systems.</h5>
    <li>Programs audit</li>
    <h5>Many <a href="software.aspx" title="Go to our software page" target="_self">applications</a> get added over time and can slow down the performance of any PC by taking up processor and memory resources, not to mention hard drive space.</h5>
    <li>Security overlook</li>
    <h5><a href="virus.aspx" target="_self">Anti-virus</a> definitions need to be kept up-to-date. New viruses, spyware, trojans, and malware are always being introduced into the wild (the internet is a jungle). Anti-virus applications need to be kept updated as well. Subscriptions to paid providers can lapse and updates can be left behind for months if not years (I've seen it happen).</h5>
    <li>Anti-virus fine tuning</li>
    <h5>Many anti-virus programs are bloated applications and won't stop annoying the user with pop-ups and information. Many users also never know when and how often their anti-virus is scanning.</h5>
    <li>Browser configuration</li>
    <h5>There are literally hundreds of options in your browsers settings for security and optimization. Fine stunning these can in some cases increase surfing speed.</h5>
    <li>Start-up & shut down optimizing</li>
    <h5>If your like most people, your PC never starts up fast enough. Get a thorough audit of what programs and services are starting with your computer and optimize them to increase speed.</h5>

</div>

    
</div>
</div>

<%-- <br class="clearfloat" />
--%>
   <div id="footer">
    <p>Copyright Mojogar 2010</p>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
CSS:
@charset "utf-8";
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #9FEE00;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #333;
h1 {
font-size: xx-large;
color: #000;
h2 {
font-size: x-large;
h3 {
font-size: large;
h4 {
font-size: medium;
h5 {
font-size: small;
h6 {
font-size: x-small;
p {
font-size: xx-small;
h1, h2 {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
h3, h4, h5, h6, p {
padding-top: 3px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
li {
font-weight: bold;
ul {
list-style-type: decimal;
ol {
font-weight: bold;
a {
a:link {
color: #FFF;
a:hover {
color: #333;
background-color: #6C8CD5;
a:active {
color: #F00;
a:visited {
color: #FF4848;
/* Tips for this Hybrid layout
1. Since the side columns em-based sizing is based on the user's default font size, you will want to be sure that background graphics in the columns take that into account. Built correctly, this is more accessible for those that need larger font sizes, since the width of the columns remains proportionate. If this is undesirable with your design, simply change the width to a pixel size and be sure to change the margins on the #mainContent div accordingly.
2. Since the sizing of side columns in this layout are based on the 100% font size in the body element, if you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the column widths will downsize proportionately. You may want to increase their widths, and the size of the #mainContent div's side margins, to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
4. The #container div is not necessary for this layout at the 100% width. You may want to use it to create faux columns or limit the width of the layout.
5. It is not neccessary to have the 100% width on the #container div since, by nature, a div takes up 100% of the available space. It is here so that if you want to decrease the size of the overall container - perhaps leaving a bit of margin on each side - this will already be available for adjustment.
.thrColHybHdr #container {
width: 780px;
/*margin: 0 auto; the auto margins (in conjunction with a width) center the page if needed */
text-align: left;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
.thrColHybHdr #header {
background-color: #C9F76F;
height: 100%;
width: 780px;
margin: 0px;
padding: 0px;
.thrColHybHdr #header h1 {
margin: 0;
padding: 0px;
/* Tips for sidebar1:
1. Be aware that if you set a font-size value on this div, the overall width of the div will be adjusted accordingly.
2. Since we are working in ems, it's best not to use padding on the sidebar itself. It will be added to the width for standards compliant browsers creating an unknown actual width.
3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".thrColHybHdr #sidebar1 p" rule.
.thrColHybHdr #sidebar1 {
width: 13em;
border-top-width: thick;
border-top-style: solid;
border-top-color: #C06;
float: left;
height: auto;
.thrColHybHdr #sidebar2 {
width: 200px;
text-align: center;
margin: 0px;
padding: 0px;
float: right;
/*.thrColHybHdr #sidebar1 h3, .thrColHybHdr #sidebar1 p, .thrColHybHdr #sidebar2 p, .thrColHybHdr #sidebar2 h3 {
margin-left: 0px;*/ /* the left and right margin should be given to every element that will be placed in the side columns */
/* margin-right: 0px;
/* Tips for mainContent:
1. If you give this #mainContent div a font-size value different than the #sidebar1 div, the margins of the #mainContent div will be based on its font-size and the width of the #sidebar1 div will be based on its font-size. You may wish to adjust the values of these divs.
2. The space between the mainContent and sidebar1 is created with the left margin on the mainContent div. No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
3. To avoid float drop, you may need to test to determine the approximate maximum image/element size since this layout is based on the user's font sizing combined with the values you set. However, if the user has their browser font size set lower than normal, less space will be available in the #mainContent div than you may see on testing.
4. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs that may occur.
.thrColHybHdr #mainContent {
text-align: center;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 580px;
background-color: #2A4480;
color: #C9F76F;
padding: 0px;
.MarginTopZero {
margin: 0px;
padding: 0px;
.busConslt {
height: 600px;
width: 800px;
.idea {
height: auto;
width: 100%;
.thrColHybHdr #footer {
padding: 0;
background-color: #C9F76F;
margin: 0px;
.thrColHybHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
color: #000;
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 0px;
padding-left: 5px;
padding-top: 3px;
padding-bottom: 3px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
#defMainLft {
width: 49%;
float: left;
text-align: center;
#defMainRt {
width: 49%;
float: right;
text-align: center;
.absolRgt {
position: absolute;
top: 0px;
right: 0px;
.relRgt {
position: relative;
top: 0px;
right: 0px;
.defFull {
position: relative;
height: 263px;
width: 100%;
border-bottom-width: medium;
border-bottom-style: solid;
border-bottom-color: #ff4900;
.absolLft {
position: absolute;
top: 0px;
left: 0px;
.defFullTop {
position: relative;
width: 600px;
border-top-width: thick;
border-top-style: solid;
border-top-color: #000;
margin: 0px;
.tuneUpTop {
background-color: #000;
color: #FFF;
margin: 0px;
padding: 0px;
.contactForm {
width: 470px;
height: auto;
left: auto;
right: auto;
.borderRight {
border: medium solid #A62F00;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
.MenuVertDiv {
margin-bottom: 0px;
clear: both;
height: 38px;
background-color: #A62F00;
width: 100%;
.masterBackground {
background-color: #BF5930;
margin: 0px;
padding: 0px;

Your HTML code contains conditional comments for IE. Try reducing or removing the extra padding and see if that helps.
/* place css fixes for all versions of IE in this conditional comment */
.thrColHybHdr #sidebar1, .thrColHybHdr #sidebar2 { padding-top: 30px; }
.thrColHybHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Gaps between header/footer and main content

I am building upon a website that somebody else previously worked on. When adding to the main content, gaps appear between the header/footer and the content. How can I fix this?
Code:
<!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>
<title>stitch by stitch needlepoint</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="sbs_style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body bgcolor="#d0e8fb" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="732" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td><a href="index.html"><img src="images/logo.gif" alt="stitch by stitch" width="316" height="66" border="0" class="logo" /></a></td></tr></tbody></table>
<table width="732" height="629" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tbody>
<tr>
<td colspan="17"><img src="images/bordertop.gif" width="732" height="31" alt="" /></td></tr>
<tr>
<td rowspan="5"><img src="images/events_borderleft.gif" width="36" height="564" alt="" /></td>
<td><img src="images/nav_spacerleft.gif" width="31" height="19" alt="" /></td>
<td><a href="index.html"><img src="images/nav_home.gif" alt="" name="home" width="47" height="19" border="0" id="home" /></a></td>
<td><img src="images/nav_dot1.gif" width="7" height="19" alt="" /></td>
<td><a href="events.html"><img src="images/nav_upcomingevents.gif" alt="" width="114" height="19" border="0" id="events" /></a></td>
<td><img src="images/nav_dot2.gif" width="11" height="19" alt="" /></td>
<td><a href="classes.html"><img src="images/Nav_classes.gif" alt="" width="57" height="19" border="0" id="classes" /></a></td>
<td><img src="images/nav_dot3.gif" width="12" height="19" alt="" /></td>
<td><a href="directions.html"><img src="images/nav_directions.gif" alt="" width="68" height="19" border="0" id="directions" /></a></td>
<td><img src="images/nav_dot4.gif" width="13" height="19" alt="" /></td>
<td><a href="photogallery.html"><img src="images/nav_photogallery.gif" alt="" width="89" height="19" border="0" id="photogallery" /></a></td>
<td><img src="images/nav_dot5.gif" width="12" height="19" alt="" /></td>
<td><a href="customdesign.html"><img src="images/nav_customdesigns.gif" alt="" width="97" height="19" border="0" id="customdesigns" /></a></td>
<td><img src="images/nav_dot6.gif" width="13" height="19" alt="" /></td>
<td><a href="vendors.html"><img src="images/nav_vendors.gif" alt="" width="67" height="19" border="0" id="vendors" /></a></td>
<td><img src="images/nav_spacerright.gif" width="24" height="19" alt="" /></td>
<td rowspan="5"><img src="images/events_borderright.gif" width="34" height="561" alt="" /></td></tr>
<tr>
<td colspan="15"><img src="images/string.jpg" width="662" height="88" alt="" /></td></tr>
<tr>
<td colspan="15"><img src="images/events_hd_upcomingevents.gif" width="662" height="44" alt="" /></td></tr>
<tr>
<td colspan="15" width="662" height="13" bgcolor="#EBECEC"> </td></tr>
<tr>
<td width="662" height="397" colspan="15" bgcolor="#EBECEC" valign="top">
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="140"><br /></td>
<td align="center"></td></tr></tbody></table>
<p align="left" class="events_boldRed"><span class="style1">Charlie Harper Trunk Show</span></p>
<p align="left"><span class="style2">February 2012</span><span class="events_boldRed"><br />
</span></p>
<p align="left"> </p>
<p align="left"><span class="events_boldRed"><span class="style1">Back to Basics II with Tony Mineri</span></span></p>
<p align="left"><span class="style2">March 12, May 14, June 18 & July 19</span></p>
<p align="left"><span class="style2">9:30-4:00 (lunch will be provided</span></p>
<p align="left"><span class="style2">Space is limited - $350.00</span></p>
<p align="left"> </p>
<p align="left"><span class="events_boldRed style1">Tony Mineri Embellishments</span></p>
<p align="left" class="style2">2012 </p>
<p align="left" class="style2">June 3rd & 4th - Full (waiting list only)</p>
<p align="left" class="style2">November 4th & 5th (limited space available)</p>
<p align="left" class="style2">2013</p>
<p align="left" class="style2">June 9th & 10th </p>
<p align="left" class="style2">October 6th & 7th</p>
<p align="left"><span class="events_boldRed"><br />
</span></p></td>
</tr>
<tr>
<td colspan="17"><img src="images/borderbottom.gif" width="732" height="37" alt="" /></td></tr></tbody></table>
<table width="732" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<p align="center"><span class="bottomnav"><a href="index.html">home</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="events.html">upcoming events</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="classes.html">classes</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="directions.html">directions</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="photogallery.html">photo gallery</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="customdesign.html">custom designs</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="vendors.html">vendors </a></span></p></td></tr></tbody></table>
<p> </p>
<p> </p>
<p></p>
<p> </p>
</body>
</html>

This is just a guess, which is what we have to do until we can see the live page, but try changing this -
<p align="left" class="events_boldRed"><span class="style1">Charlie Harper Trunk Show</span></p>
to this -
<p align="left" class="events_boldRed" style="margin-top:0;"><span class="style1">Charlie Harper Trunk Show</span></p>
Does that solve the gap between the header and the main content?
While you're worrying about these gaps, read this -
http://www.apptools.com/rants/spans.php
I see trouble ahead....

Gap between header and content in IE

Hello All
I subscribed to a post with this basic same question but I
never got a notification if it got answered or not
I all of a sudden have a gap between the header and content
on this site
http://www.michaelsondesign.com/guestVision/
- I am not sure why , it started when I added to the menu on the
left
Any ideas?
Thanks
Rob

Add this to your CSS
img {vertical-align:top;}
You cannot lose until you give up !!!
"BOC_RUSH" <[email protected]> wrote in
message
news:fsn546$nrm$[email protected]..
> Hello All
>
> I subscribed to a post with this basic same question but
I never got a
> notification if it got answered or not
>
> I all of a sudden have a gap between the header and
content on this site
>
http://www.michaelsondesign.com/guestVision/
- I am not sure why , it
> started
> when I added to the menu on the left
>
> Any ideas?
>
> Thanks
>
> Rob
>
>

Unwanted gaps between images in Internet Explorer

I have sliced a image web page in Photoshop and exported it
to .html and images. It looks perfect in IE7 and Firefox. Then
brought it into Dreamweaver and deleted the large image in the
content area and inserted a table into the content area. Now when I
preview it in IE7 there is a gap between the top image and the two
images on either side of the content area. Borders for all three
images is set to zero as are cell padding etc. It displays
correctly in Firefox and Dreamweaver but IE7 places a gap between
the images. How do I remove the gap using HTML tables?

>I have sliced a image web page in Photoshop and exported
it to .html and
> images.
That's a bad start. The HTML written by graphics apps (and
indeed by any
'wizard') is fragile, and unsuitable for any use other than
prototyping.
> Now when I preview it in IE7 there is a gap between the
top image
> and the two images on either side of the content area.
This is precisely the symptom of having used a graphics app
to write your
HTML. Why? You have changed the ground rules (i.e., the shape
of the
content) by deleting the large image and replacing it with a
table. When a
wizard writes your HTML, it writes it to EXACTLY reproduce
the shape you
have given it. Change that shape and you change the way the
fragile code
adapts - resulting in a breakage of your layout.
The principal culprit is the use of col- and rowspans by
these wizards -
... colspan="3">
You can read more about this here -
http://apptools.com/rants/spans.php
The solution is to bite the bullet and learn enough HTML that
you can create
your own layouts without relying on a graphics app. Otherwise
you will
have this problem continuously.
1. When I need to merge cells...
a. If they are horizontally adjacent, instead of merging
them, I end
the current table, and 'stack' a new one underneath it with
the desired cell
configuration.
b. If they are vertically adjacent, then I end the current
table at the
row ABOVE the row where the need for merging begins. I then
start a new
table with two cells in one row, and place a properly
structured inner table
in each of those two cells.
2. When I need to split cells, I just insert a nested table
with the proper
cell configuration into the cell I would otherwise split.
The goal here is to completely avoid merging or splitting
cells (i.e., using
col- or rowspan attributes in your table markup), since
that's what makes
Layout mode's tables (and any wizard's tables) so fragile.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Clark9" <[email protected]> wrote in
message
news:[email protected]...
>I have sliced a image web page in Photoshop and exported
it to .html and
> images. It looks perfect in IE7 and Firefox. Then
brought it into
> Dreamweaver
> and deleted the large image in the content area and
inserted a table into
> the
> content area. Now when I preview it in IE7 there is a
gap between the top
> image
> and the two images on either side of the content area.
Borders for all
> three
> images is set to zero as are cell padding etc. It
displays correctly in
> Firefox
> and Dreamweaver but IE7 places a gap between the images.
How do I remove
> the
> gap using HTML tables?
>
> <html>
> <head>
> <title>African Chamber of Commerce of
Texas</title>
> <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
> <style type="text/css">
> 
> <table id="Table_01" width="935" height="810"
border="0" cellpadding="0"
> cellspacing="0">
> <tr>
> <td height="212" colspan="3"><img
src="images/index_01.gif" alt=""
> width="935" height="212" border="0" usemap="#Map">
> <map name="Map">
> <area shape="rect" coords="100,182,157,206"
href="index.html">
> <area shape="rect" coords="188,185,270,207"
> href="about_us.html">
> <area shape="rect" coords="305,183,378,208"
> href="benefits.html">
> <area shape="rect" coords="413,183,486,208"
> href="members.html">
> <area shape="rect" coords="518,184,594,209"
> href="events.html">
> <area shape="rect" coords="618,183,705,208"
> href="application.html">
> <area shape="rect" coords="740,181,832,208"
> href="contact_us.html">
> </map></td>
> </tr>
> <tr>
> <td rowspan="2" align="left" valign="top"><img
src="images/index_02.gif"
> alt="" width="94" height="600" border="0"
align="top"></td>
> <td height="501" valign="top"><table
width="747" height="269" border="0"
> cellpadding="8" cellspacing="0">
> <tr>
> <td width="211" valign="top"><p
class="style1">
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
> Transitional//EN">
> <br>
> <em><strong>United We Stand; Divided We
Fall.</strong></em>
> </p>
> <p class="style1">With your participation in ACCT,
you become
> one
> of the contributors toward the building and advocacy of
the “Trade
> Not
> Aid” movement.</p></td>
> <td width="250" valign="top"><div
align="center">
> <p><span class="style2">
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
> Transitional//EN">
> <br>
> </span><span
class="style2"><strong>What ACCT can do for
> you?</strong></span> </p>
> </div>
> <ul>
> <li> <span class="style1">Networking and
Exposure<br>
> Referrals</span></li>
> <li class="style1">Cultural center</li>
> <li class="style1"> Newsletters</li>
> <li class="style1"> Welcome and orientation
program</li>
> <li class="style1"> Assistance in business
outreach
> programs</li>
> <li class="style1"> Training and continuing
education in
> small business start-up and management</li>
> <li class="style1"> ACCT office
facilities</li>
> <li class="style1"> Legal assistance</li>
> <li class="style1"> ACCT will be there for you,
all the
> way.
> </li>
> </ul></td>
> <td width="238" valign="top" class="style1">
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
> <br>
> <strong>ACCT</strong> believes that lasting,
meaningful
> furtherance of economic development efforts is
predicated on the
> equitable
> sharing of world resources, along with the preservation
and maintenance
> of a
> healthy and fair business environment. Furtherance of
economic
> opportunities
> in a global economy also requires an informed and
involved public where
> everyone participates in decisions which affect the
common good for
> self-reliance, sustainability and prosperity. The
cornerstone of ACCT is
> “<strong>Trade Not
Aid”.</strong></td>
> </tr>
> </table></td>
> <td rowspan="2" align="left" valign="top">
> <img src="images/index_04.gif" alt="" width="94"
height="600" border="0"
> align="texttop"></td>
> </tr>
> <tr>
> <td height="97" valign="top"><img
src="images/index_05.gif" width="747"
> height="97" alt=""></td>
> </tr>
> </table>
> 
> </body>
> </html>
>

Unwanted gaps on page in IE6

The site looks fine in
Firefox and IE7, but in IE6 there is a gap to the right of the
header, navigation menu, and footer, and I'm going crazy trying to
find a solution. Here's my code; I hope someone can help me!

That's your CSS. We would need to see the HTML too, as the
answer really
lies there. Can you just upload the page and post a link to
it? That will
allow us to actually see the gaps happen.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"oa2005" <[email protected]> wrote in
message
news:[email protected]...
>
http://www.devilbrownies.com/wip
looks fine in Firefox and IE7, but in IE6
> there is a gap to the right of the header, navigation
menu, and footer,
> and I'm
> going crazy trying to find a solution. Here's my code; I
hope someone can
> help
> me!
>
>
>
> @charset "utf-8";
> body {
> font: 100% Verdana, Arial, Helvetica, sans-serif;
> margin: 0; /* it's good practice to zero the margin and
padding of the
> body
> element to account for differing browser defaults */
> padding: 0;
> text-align: center; /* this centers the container in IE
5* browsers. The
> text
> is then set to the left aligned default in the
#container selector */
> color: #000000;
> background-color: #663300;
> }
> .oneColFixCtrHdr #container {
> width: 780px;
> text-align: left; /* this overrides the text-align:
center on the body
> element. */
> background-color: #FFFFCC;
> margin-top: 0;
> margin-right: auto;
> margin-bottom: 0;
> margin-left: auto;
> }
> .oneColFixCtrHdr #header {
> background-repeat: no-repeat;
> padding-top: 0;
> padding-bottom: 0;
> height: 190px;
> background-image: url(../images/header7.gif);
> }
> .oneColFixCtrHdr #header h1 {
> color: #D67F3A;
> }
> .oneColFixCtrHdr #contact {
> font-size: small;
> font-weight: bold;
> color: #660000;
> margin-top: 110px;
> margin-right: auto;
> margin-bottom: 0;
> margin-left: auto;
> padding: 0;
> }
> .oneColFixCtrHdr #contact a {
> color: #66002C;
> text-decoration: none;
> }
>
>
>
>
> .oneColFixCtrHdr #mainContent {
> padding-top: 50px;
> padding-right: 20px;
> padding-bottom: 0;
> padding-left: 20px;
> }
> .oneColFixCtrHdr #mainContent h1 {
> font-family: Georgia, "Times New Roman", Times, serif;
> color: #B35900;
> font-size: large;
> }
> .oneColFixCtrHdr #mainContent h2 {
> font-family: Georgia, "Times New Roman", Times, serif;
> font-weight: bold;
> color: #B35900;
> font-size: medium;
> }
>
>
> .oneColFixCtrHdr #mainContent p {
> line-height: 1.25em;
> color: #660000;
> font-family: Georgia, "Times New Roman", Times, serif;
> }
> .oneColFixCtrHdr #mainContent a {
> color: #B35900;
> }
> .oneColFixCtrHdr #mainContent strong {
> color: #B35900;
> }
>
>
>
> .oneColFixCtrHdr #footer {
> padding: 0 10px;
> background-color: #9B5720;
> }
> .oneColFixCtrHdr #footer p {
> margin: 0; /* zeroing the margins of the first element
in the footer will
> avoid the possibility of margin collapse - a space
between divs */
> padding: 10px 0; /* padding on this element will create
space, just as
> the
> the margin would have, without the margin collapse issue
> font-size: x-small;
> color: #FFFFCC;
> text-align: center;
> font-family: Verdana, Arial, Helvetica, sans-serif;
> }
> .oneColFixCtrHdr #footer a {
> font-weight: bold;
> color: #FFFFCC;
> text-decoration: none;
> }
>

Gap between header and body

Page:
www.megamarketingtools.com/problem.html
That small gap (looks like a black line) is driving me crazy.
I searched these forums but the suggestions I found didn't
do anything for me.
Help, please.
Thank you.

bffinn wrote:
Page:
www.megamarketingtools.com/problem.html
That small gap (looks like a black line) is driving me crazy.
I searched these forums but the suggestions I found didn't
do anything for me.
Help, please.
Thank you.
Your code is screwed up. Try the amended version below:
<!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" />
<title>MegaMarketing One Time Offer</title>
<link href="scripts/ototemp/Template8/Blue/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<link href="otostyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="750" height="270" valign="bottom" background="scripts/ototemp/Template8/Blue/images/header.jpg" border="0"> </td>
</tr>
<tr>
<td align="left" valign="top" background="scripts/ototemp/Template8/Blue/images/page-inside-bg.jpg"> </td>
</tr>
</table>
</body>
</html>

CSS gap below header

I have a header on a template that is showing a gap between it and the divs in the content below it. I have borders in different colors and you can see it at mojogar.com. The header has a blue line that represents a bottom border line in its CSS.
.thrColHybHdr #header {
background-color: #C9F76F;
margin: 0px;
padding: 0;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: #30F;
Right below that is a black line that is the border top of the container div for the middle section. They line up fine.
.thrColHybHdr #mainContent {
margin-top: 0;
margin-right: 13em;
margin-bottom: 0;
margin-left: 13em;
padding-top: 0;
padding-right: 1em;
padding-bottom: 0;
padding-left: 1em;
text-align: center;
position: relative;
border-top-width: thick;
border-top-style: solid;
border-top-color: #000;
But, my div inside that "mainContent" div leaves a gap (as do the side ones which I am not posting the CSS but you can see the gaps on the sides at the site). Here is the CSS for that div inside the middle section with the yellow top border.
.defFullTop {
position: relative;
width: 100%;
border-bottom-width: medium;
border-bottom-style: solid;
border-bottom-color: #ff4900;
border-top-width: thick;
border-top-style: solid;
border-top-color: #FF0;
border-right-width: thick;
border-left-width: thick;
border-right-style: solid;
border-left-style: solid;
border-right-color: #C03;
border-left-color: #C00;
Thanks!

Page looks roughly the same to me in IE7 and IE8 - a slight gap below the header.
A much bigger problem occurs if you resize browser viewport below 1280px. Everything shifts.
Overall this layout isn't working.
Related links:
Google labs - Browser Size
http://browsersize.googlelabs.com/
Open Source CSS Frameworks and Multi-Column Layouts
http://EZ-CSS.org
http://960.gs/
http://code.google.com/p/blueprintcss/
http://developer.yahoo.com/yui/grids/index.html
http://developer.yahoo.com/yui/grids/builder/
http://layouts.ironmyers.com/
http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-width s
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Newbie Question: How to create a gap between header and wrapper?

Hi everyone,
My wife and I are trying to figure this one out. We have tried double clicking on the wrapper in the "All Rules" menu, adding a top margin to the wrapper in the "Box" submenu, as well as changing the positioning of the wrapper in the "Positioning" menu, but this made both the wrapper and header move down. How to I make the wrapper move down while leaving the header in place, so as to create a gap in between the two? Thansk so much!

As snake states, a link to the page would be best. Usually margin top is what you would set. So if your wrapper is below your header, you would set the margin top in the css for the wrapper to be what you want the gap to be.
Usually a wrapper or container is what is holding the whole site, but this doesn't sound the case here. So something like this in your css.
.wrapper {
margin-top: 25px;
You would probably add the margin-top:25px to the existing css for that page.
If you can provide a link to the page, the very helpful people would be able to solve this for you rather easily.
Jim

Unwanted Gap at top of web page

Dreamweaver has created a 15px gap between the top of my web
page and the toolbars, in the design view this is shown by a grey
bar with diagonal stripes, in a browser the background shows
through. How do I get rid of this gap?
seriously bugging me.
Thanks

Thanks, not quite sure where that goes, heres the url
www.flamencoart.net/info.html any further help appreciated.
Should I also close the large gaps in my code as you scroll
down?

Wrong Dimensions & Unwanted Gaps When Inserting Edge Animate Files In Dreamweaver

I wasn't quite sure which forum this belonged in, so my apologies in advance if anyone feels this should be in the Edge Animate forum instead.
I noticed when creating an animation in Edge Animate, when I publish it and try to add it within Dreamweaver, for some reason Dreamweaver is adding an extra 20 pixels to the width and the height. Also, since the Object tag used to embed it is Inline by default, it is also causing a small gap at the bottom of the animation between it and any blocks that come after it. Granted, I can go in and correct the dimensions in the code myself, and I can change the CSS on the Object tag to get rid of that gap. But what I'm confused about is why it is doing this - particularly with tacking an extra 20px onto the width and height, in the first place. Is there a setting somewhere to stop it from doing this? Below are screenshots of the animation in Edge Animate, where you can see the dimensions were 960x400, then a screenshot of Dreamweaver where you can see that it changed the dimensions to 980x420.

Your container has a width of 960px.
Your Edge has a width attribute in the HTML code of 980. Are you saying you didn't put that there?
By default, all browsers add their own margins & padding to HTML elements. It's customary practice for developers to zero out the default margins & padding with CSS.
You can use a global CSS reset or do it manually.
#block1, #block2, #block 3 {
margin:0 auto;
padding:0;
width: 960px;
Nancy O.

Unwanted gaps between exactly fitting shapes - workaround?

Hi,
With shapes that are intended to fit exactly with one another, such as shapes created with pathfinder>divide I find often that there are very small cracks between the shapes and that these will show up if the shapes are exported to Photoshop in a more pronounced way.
What's the workaround to 'seal' one shape to another and rid the result of these gaps?
Joining the shapes is not an option as they are different colours.
Any help much appreciated.

two possibilities:
1. you havean RGB document and "Align to pixel grid" is turned ON. Then there may be real gaps between objects after pathfinder operations.
2. it's just a screen artifact. Don't just open the AI in Photoshop, but export a PSD out of Illustrator. Use the anti-aliasing method for objects, not the one for type.

Unwanted gaps between tracks on CD

I have cut up a live concert recording into individual WAV files. I assembled them in a single track of a Multitrack session. I overlapped the tracks and allowed auto fading to smooth out the transitions between selections and carefully placed the CD Track Markers where I wanted them near the overlap. It plays perfectly in the timeline. When I insert the tracks into the CD Layout I set all the pause values to zero and burn the disk. When I play the CD there is a very brief gap of silence between the tracks, not what I wanted in a live concert recording. I have no way of measuring it, but I suspect the gaps are the durations of the overlaps. The smooth transitions I hear in the timeline are gone. This sounds like a bug. Any ideas?
Thanks

Well actually it should work... but if you have markers set on non-CD boundary times, the chances are that you'll end up with gaps where the track indication has been set at the next boundary. What I'd suggest initially is that you go back to your edited file, set the time scaling on the time line to CD, and then set the snapping so that it snaps at CD boundaries. Then, reset the markers to land on them, and try again.
If it doesn't work properly then, we'd like to know about it!

Unwanted gap in header

Similar Messages

Maybe you are looking for