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

Similar Messages

CSS design, gap below images in IE

I'm really getting into ditching tables for CSS / divs, but
am coming up against all the browser bugs you're warned about. Some
I can fix but one that has me puzzled is where my masthead image,
within a div, looks fine in Firefox but has a couple of pixels gap
below it and the next div element below it (which will be used for
navigation). I can't show you a link as it's not live, just very
much at development stage.

Rename the page, upload it and post the link.
"Cactus Woman" <[email protected]> wrote in
message
news:eu5ha4$fi$[email protected]..
> I'm really getting into ditching tables for CSS / divs,
but am coming up
> against all the browser bugs you're warned about. Some I
can fix but one
> that
> has me puzzled is where my masthead image, within a div,
looks fine in
> Firefox
> but has a couple of pixels gap below it and the next div
element below it
> (which will be used for navigation). I can't show you a
link as it's not
> live,
> just very much at development stage.
>

How to remove the lines above and below header in sqlplus report

I run a sql*plus report whch i want to be outputted to XLS file. But the format is not matching. I am using data->texttocolumns feature of excel , which is manual .
As the headers are coming dynamically from query . i CAN NOT set header off.
So first of all ,
I want to get rid of the first blank line above the hearder.
i want to get rid of the dotted line below header .

Hi,
You are not being clear here,
As the headers are coming dynamically from query . i CAN NOT set header off. You are saying that you have SQL*Plus script but can't use the SET command?
Besides, that I thing you want SET PAGES 0, instead of SET HEADER OFF.
If you could paste your SQL*Plus script here (Perhaps replacing the actual query with a very simple one, then perhaps we can help.
Regards
Peter

Gap below footer...

I cannot, for the life of me, determine why I have a gap below the footer of my pages on this site. The URL is...
http://excelhr.businesscatalyst.com/index.html
My settings are as follows...
and index...
I realize the page heights are different in these shots, but that was a test I did right before I submitted this quesiton. It makes no difference. The footer is dragged to the bottom of the page, and is aligned to the red guide designating bottom of browser.
Any help would be much appreciated...
Thanks in advance.

Tried with both 'sticky footer' selected and deselected. The site is not fixed height, so without it selected one of the pages had the footer in the middle of the page. The selection made no difference on pages that did match the overall site's designated height. It still had the 10 to 20 pixel gap at the bottom.
Coincidentally, I am working with two sites right now that were doing the same thing, and the fix for both was to trun off all effects and groupings, and pull the box about 30 pixels below the 'bottom of page'. And all of my testing was being done on the master page itself, and still getting the gap, so page settings vs site settings would not have played into it.
I saw that post that discussed the sticky footer too, and tried it then.

Excessive light leakage from gap below some keys on MBP

Hi all, I got a top of the line 15" MBP a little while ago and recently noticed excessive light leakage from the little gap below some of the keys. It's really only noticable below the W and E keys when sitting or viewing from a certain angle. It can be quite annoying at times. I spoke to a couple of Apple support reps who said that it's common to some extent on most MBP's. I also took it in to my local Apple store, and they said it's "within spec". I was kind of hoping for a better answer after spending almost $2500 on the thing, but whatever. I came across several posts on various Apple forums with people posting about similar issues going back as far as 4-5 years, so obviously Apple hasn't done a great job addressing the issue.
I also noticed a little pinhole size blue light below my J key, which someone pointed out was probably just a logic board light. Are these things common on MBP's? I figure I can get a more honest opinion on here than from Apple support or "geniuses". Any help would be great, thanks!

Hi d,
The "light leakage" is not unusual - it's been on every MBP I've seen (if you look at it from the "right" angle). I'm sure there are better and worse keyboards due to manufacturing.

Apparent gap below CSS sticky footer in IE?

I've been testing CSS "sticky footer" solutions I found on the Web. The one I picked works in the four browsers I checked with (Firefox, Chrome, Opera and IE) but there's one possible glitch. In IE 8. I'm seeing what appears to be a small gap between the footer and the bottom of the browser window. My Color Cop utility says neither of the two colors in that gap match anything specified in the CSS. I've included a screen capture, and a link if you have IE installed. I'd like to know if this is a problem with IE (who woulda thunk?) or something inherent in the look of IE's browser window?
http://dreamweaverresources.com/tutorials/sticky-footer/

I assume "browser chrome" means the imagery used to create the "pieces" of the browser's appearance outside the browser window contents.
Yes.
http://www.expression-web-tips.com/what-is-browser-chrome/
But, if by scrollbar you mean the sliding blue rectangle on white background with a directional arrow on either end, I don't see that anywhere -- side or bottom -- when I view that link in IE 8?
You'll see it if you shrink the height of your browser below a certain dimension.
I saw it on my widescreen monitor.

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

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>

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

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

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
>
>

CSS: Gap in FF/Opera

Hey there,
I have one of those
late-night-long-hours-seemingly-simple-issues : a
gap that appears between to elements in FF as well as opera.
Here is the sourcecode, with the CSS...
The gap i am talking about is between the logo and the
following element
<div id="wrapper">
<!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=iso-8859-1" />
<title>MBV Layout Test</title>
<style type="text/css">
body {
padding:0;
margin:0;
background-color:#070707;
font-size:small;
#logo {
background-color: #fff;
text-align:right;
#logo img {
margin: 10px 30px 10px 0;
#wrapper
width:790px;
margin: 0 auto;
min-height:500px;
/* border-left:2px solid;
border-right:2px solid; */
color:#fff;
background: #323232 url(images/logo/background_bottom.gif)
no-repeat
bottom;
#inner_wrapper {
min-height:475px;
background: #323232 url(images/logo/background.gif) repeat-y
0;
#container {
margin:1em 10px 1em 10px;
text-align:left;
</style>

</head>
<body>
<div id="logo">
<img src="images/logo/MBV_opening_logo.gif" alt="logo"
class="logo"/>
</div>
<div id="wrapper">
<div id="inner_wrapper">
<div id="container">
<p>Consectetur adipisicing elit, ut labore et dolore
magna
aliqua. Cupidatat non proident, eu fugiat nulla pariatur.
Lorem ipsum
dolor sit amet, duis aute irure dolor excepteur sint
occaecat. Velit
esse cillum dolore sunt in culpa ut labore et dolore magna
aliqua. Ut
aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div id="footer">
© 2006 - MBV | <a
href="contact.php">Contact</a>
</div>
</body>
</html>
Any help is greatly appreciated!
Thanks,
anurag

Try adding this to your CSS -
#container > p { margin-top:0; }
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Anuragbabaji" <[email protected]> wrote in
message
news:[email protected]...
> Hey there,
>
> I have one of those
late-night-long-hours-seemingly-simple-issues : a gap
> that appears between to elements in FF as well as opera.
>
> Here is the sourcecode, with the CSS...
>
> The gap i am talking about is between the logo and the
following element
> <div id="wrapper">
>
> <!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=iso-8859-1" />
> <title>MBV Layout Test</title>
> <style type="text/css">
>
> body {
> padding:0;
> margin:0;
> background-color:#070707;
> font-size:small;
> }
>
> #logo {
> background-color: #fff;
> text-align:right;
> }
>
> #logo img {
> margin: 10px 30px 10px 0;
> }
>
> #wrapper
> {
> width:790px;
> margin: 0 auto;
> min-height:500px;
> /* border-left:2px solid;
> border-right:2px solid; */
> color:#fff;
> background: #323232
url(images/logo/background_bottom.gif) no-repeat
> bottom;
> }
>
> #inner_wrapper {
> min-height:475px;
> background: #323232 url(images/logo/background.gif)
repeat-y 0;
> }
>
> #container {
> margin:1em 10px 1em 10px;
> text-align:left;
>
> }
> </style>
> 
> </head>
>
> <body>
>
> <div id="logo">
> <img src="images/logo/MBV_opening_logo.gif"
alt="logo" class="logo"/>
> </div>
>
> <div id="wrapper">
> <div id="inner_wrapper">
> <div id="container">
> <p>Consectetur adipisicing elit, ut labore et
dolore magna aliqua.
> Cupidatat non proident, eu fugiat nulla pariatur. Lorem
ipsum dolor sit
> amet, duis aute irure dolor excepteur sint occaecat.
Velit esse cillum
> dolore sunt in culpa ut labore et dolore magna aliqua.
Ut aliquip ex ea
> commodo consequat.</p>
> </div>
> </div>
> </div>
>
> <div id="footer">
> © 2006 - MBV | <a
href="contact.php">Contact</a>
> </div>
>
> </body>
> </html>
>
> Any help is greatly appreciated!
>
> Thanks,
>
> anurag

What controls the space above 'maincontent' in CSS layout with header?

In a freshly-downloaded CSS page layout with header (twoColHybLtHdr or similar), there is a space of about 20px between the bottom of the header box and the top of the maincontent box. Because of this space, when a bottom border is added to the header and a left border to maincontent, the two lines don't intersect, which is what I want. What controls this space so I can get rid of it?
Thanks, Joann

Hi Joann,
after formatting your text from "Ueberschrift 1" to "Kein" (translated from German DW)
Header 1
Header 2
all spaces were gone.
Hans-G.

Css - linking to header image

Hello,
I'm building a Web site using CSS. I refer to the header
image file within the #header part of my CSS - "background-image:
url(../images/header_birnweb.jpg);
background-repeat: no-repeat; "
Then I merely create a header division in my HTML file:
<div id="header"></div>
But now my client wants to link to the the header image to
the site index page. How do I do that?
Thanks,
Lee

Other than a transparent image nested inside the DIV, I'm not
too sure of
any other way.
One question: is there a reason you're doing it like that,
instead of using
the <img> tag? Cleanliness? Ease?
Just curious ...
Shane H
[email protected]
http://www.avenuedesigners.com
=============================================
Proud GAWDS Member
http://www.gawds.org/showmember.php?memberid=1495
Delivering accessible websites to all ...
=============================================
"VinnieVee" <[email protected]> wrote in
message
news:e5nljb$e4r$[email protected]..
> Hello,
> I'm building a Web site using CSS. I refer to the header
image file
> within
> the #header part of my CSS - "background-image:
> url(../images/header_birnweb.jpg);
> background-repeat: no-repeat; "
> Then I merely create a header division in my HTML file:
<div
> id="header"></div>
>
> But now my client wants to link to the the header image
to the site index
> page. How do I do that?
>
> Thanks,
> Lee
>

CSS gap below header

Similar Messages

Maybe you are looking for