Gap between header and main content...Help!

Hi everyone, can you please help me figure out the gap between my header (logo) and the main content of my store? The gap happens in different places in Firefox and in IE, but is there regardless. Thank you!

Sorry I forgot to give a link:

http://www.scrappinfreestyle.com/store

Thanks

andreadesigns:

Sorry I forgot to give a link:

http://www.scrappinfreestyle.com/store

Thanks

in your tpl_header.php, change all:
<br class="clearBoth">

to <div class="clearBoth"></div>

Then in your css, change:

.clearBoth {clear:both;}

to

.clearBoth {
clear:both;
height:0;
font-size:0;
line-height:0;
margin:0;
padding:0;
}

Actually I think the main cause for the gap is the height you have defined for > <img width="300" height="282" title=" http://scrappinfreestyle.com " alt="http://scrappinfreestyle.com" src="includes/templates/red_passion/images/logo.gif"/>
Other items behind that image have a much smaller height but the size of the image is forcing the taglineWrapper to do wierd things. There's nothing in the taglineWrapper and it is not defined in the css. It is, however inside the logoWrapper and, therefore, affected by the height of the logo.

A further look indicates that this gif is nothing more than a blank block.:shocking:

Therefore, adding > #logo {

display: none;
} to the css moves everything.

If you do want to save the link, just crop your logo.gif (in your red-passion template images file) to the size you want.

dbltoe:

Actually I think the main cause for the gap is the height you have defined for > <img width="300" height="282" title=" <http://scrappinfreestyle.com> " alt="http://scrappinfreestyle.com" src="includes/templates/red_passion/images/logo.gif"/>
Other items behind that image have a much smaller height but the size of the image is forcing the taglineWrapper to do wierd things. There's nothing in the taglineWrapper and it is not defined in the css. It is, however inside the logoWrapper and, therefore, affected by the height of the logo.

Thank you very much for pointing this out. I changed the height in my css, but I guess it is being defined somewhere else (as you pointed out)...what file is that code located in that you found?

Replace includes/templates/red_passion/images/logo.gif with the attached file. Until the file is changed NOTHING you do in css (except turning it totally off will change the size of the file.

Thank you SO much!!! This fixed my problem :) I appreciate it so much :)

Glad you got it goin'

in your tpl_header.php, change all:
<br class="clearBoth">

to <div class="clearBoth"></div>

Then in your css, change:

.clearBoth {clear:both;}

to

.clearBoth {
clear:both;
height:0;
font-size:0;
line-height:0;
margin:0;
padding:0;
}
So a question or two: I've got this dumb space in Firefox between "Home Log In" and the logo/image section. There was a dumb space below the image too, which I eliminated in both browsers by taking a <br class="clearBoth"> line out of templates\template_default\common\tpl_header.php

There's one more instanceof that code line in tpl_header but removing it does not get rid of the gap.

At anyrate, does having removed <br class="clearBoth"> from one place in this file compromise anything I'm not aware of? Do I need to fix it exactly like in the quote above.... or is just having eliminated it Ok?

Can't really tell without a URL. Generally, firefox is the one that's rendering the code correctly.

Spannungsbogen:

So a question or two: I've got this dumb space in Firefox between "Home Log In" and the logo/image section. There was a dumb space below the image too, which I eliminated in both browsers by taking a <br class="clearBoth"> line out of templates\template_default\common\tpl_header.php

There's one more instanceof that code line in tpl_header but removing it does not get rid of the gap.

At anyrate, does having removed <br class="clearBoth"> from one place in this file compromise anything I'm not aware of? Do I need to fix it exactly like in the quote above.... or is just having eliminated it Ok?

You should fix it like the quote above. Because some browsers won't start a new line, and you may have issues with your layout breaking. The code above will get rid of the space.

jettrue:

in your tpl_header.php, change all:
<br class="clearBoth">

to <div class="clearBoth"></div>

Then in your css, change:

.clearBoth {clear:both;}

to

.clearBoth {
clear:both;
height:0;
font-size:0;
line-height:0;
margin:0;
padding:0;
}

Thank you so much for this fix. I have been looking a long time for a way to fix this. THANK YOU!!!

I have the same problem. I've tried everything including the fix above. Any suggestions?

Page displays fine in IE but not Mozilla?

http://www.sitemagicdesigns.com/zen/

PiscesFish:

I have the same problem. I've tried everything including the fix above. Any suggestions?

Page displays fine in IE but not Mozilla?

http://www.sitemagicdesigns.com/zen/

Its because of the h1 of the tagline, in your stylesheet change h1 to this:

h1 {
font-size: 1em;
color: #FF9900;
margin:0!important;
}

or...
On line 95 of the stylesheet, change the 0.3em margin to 0.0em. You've already changed the 3pt to 0pt

Oh Happy Day!

Changing Line 95 as you suggested worked!!!!
:clap:
Thank You! Thank You! Thank You!
I have been messing with that for hours.
:frusty:

I am having the same problem. I have taken all the above suggestions and i still have this big purple space where the tagline is. Any suggestions would be great, Im pullin my hair out with this as i have spend hours trying to fix it.

Thanks in advance.

maybe a link to the problem.....:wink:

Get a copy of the firefox browser and the firebug add on for it. It will help you tremendously.

Meanwhile....... Are you talking about the light purple between "Home LogIn" and "Categories"? If so, you can go to the css and delete the 150px height call for the logoWrapper around line 183