Gap between HEADER and all below it.

So, I've been searching for this answer and have tried multiple suggestions, but still can't seem to get to the bottom of this.

There's a pesky little gap between my header and everything below it, which would include the sideboxes and anything I put in main page section of the Defines Page Editor.

Here's an image:

How would I remove that? Any suggestions would be much appreciated.

Thanks,

Cris

Try adding:

.clearBoth {
  font-size:0px;
  line-height: 0px;
}

That should shrink the little gap!

Absolute

Absolute:

Try adding:

.clearBoth {
font-size:0px;
line-height: 0px;
}

Thanks for the help. I went into the stylesheet and added this. tried about 10 different places, but still no luck.  Where exactly should I drop this in? 

Again, thanks for the help. Much appreciated. 

Cris

Can you post a link to your site? That way, we can actually see where the problem is.

Try that code at the very end of the stylesheet.

Absolute

The site is

http://www.ministryflix.com

Thanks!

Absolute:

Can you post a link to your site? That way, we can actually see where the problem is.

Try that code at the very end of the stylesheet.

Absolute

Almost forgot to mention. I put the code at the bottom of the stylesheet, but still didn't work.

This gap is created by 2 smaller gaps. The first one is due to the use of a <br />. In your tpl_header.php file, find the close table tag after <table id="Table_01" width="748" height="208" cellspacing="0" cellpadding="0" border="0">. There is a <br /> just after this </table>. Remove this.

Secondly, at the very end of yuor stylesheet, add:

.centerColumn {
  padding-top:0px;
}

Also, on line 1135 of your stylesheet, change the

.leftBoxContainer, .rightBoxContainer {stylesheet.css (line 1135)
border:1px solid #727D84;
margin:1.2em 0em 0em;
}

TO:

.leftBoxContainer, .rightBoxContainer {stylesheet.css (line 1135)
border:1px solid #727D84;
margin:0em 0em 1.2em;
}

THis will remove the top padding/margin from the columns, and in teh case of the sideboxes, move the margin from above each box to below each box.

Absolute

Absolute, Thanks! That did the trick. No more gap! That <br> was half the battle on this. I sure do appreciate your help. Thank you!

More than welcome - happy to help!

Absolute

Hello!

I am having a similar problem.. but only in IE. I tried your suggestion, Absolute, but it didn't work. I am thinking it has something to do with the padding or margins.. but I have no idea where to begin looking?!

http://digitalcandy.ca/

While I have you here, I am also running into a problem with the Featured and New Products images... in IE, of course! Every once in a while, the text links for the images will show up behind the image..? It is very, very random.. I reload the page 20 times and it only happened once.. but when I did another test and reloaded the page 10 times it happened three times. I can't find any pattern in the chaos. Any thoughts?

I am having the same problem as cleverpork. I want to remove the gap below the navigation so that there is no white space between it and the left side box.

I tried absolute's suggestions, but my stylesheet doesn't have .leftBoxContainer, .rightBoxContainer in it. I tried adding it, but it didn't help.

My site is http://www.tracibunkers.com/zen/

Thanks!

Okay... I fixored the gap at the top.. still having issues with the links showing up behind the images.. any thoughts?

@tracib - on line 186 of your stylesheet, you have a float:left within the #headerWrapper. Remove this line, and see how that looks. That should remove the white gap, and probably replace it with the background image. Then it's just a case of close that gap within the left column.

One thing that confuses me with your layout, is the use of the outer div, with a left padding to make room for the left column, followed by the main column having a negative left margin, to fill this padded space. Why not just make use of a table here, using the column width to define the left column width? This would also make closing that gap a little easier, as it would be within one column, rather than in divs spanning the page. Using a table here would also mean that your colum background could be a single colour, rather than an image.

Just a thought......

Absolute

To: Absolute
I have tried this and it worked I am grateful that you had helped Cleverpork.