Gap between header and main content...Help!

17 Aug 2007, 02:53

#1

New Zenner

Join Date:: May 2007
Posts:: 13
Plugin Contributions:: 0

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!

17 Aug 2007, 11:24

#2

andreadesigns

New Zenner

Join Date:: May 2007
Posts:: 13
Plugin Contributions:: 0

Re: Gap between header and main content...Help!

Sorry I forgot to give a link:

http://www.scrappinfreestyle.com/store

Thanks

17 Aug 2007, 12:59

#3

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: Gap between header and main content...Help!

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

17 Aug 2007, 20:38

#4

dbltoe

Totally Zenned

Join Date:: Jan 2004
Posts:: 9,707
Plugin Contributions:: 6

Re: Gap between header and main content...Help!

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.

17 Aug 2007, 20:45

#5

dbltoe

Totally Zenned

Join Date:: Jan 2004
Posts:: 9,707
Plugin Contributions:: 6

Re: Gap between header and main content...Help!

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.

17 Aug 2007, 23:09

#6

andreadesigns

New Zenner

Join Date:: May 2007
Posts:: 13
Plugin Contributions:: 0

Re: Gap between header and main content...Help!

dbltoe:
Actually I think the main cause for the gap is the height you have defined for [quote]<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.[/quote]

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?

18 Aug 2007, 14:50

#7

dbltoe

Totally Zenned

Join Date:: Jan 2004
Posts:: 9,707
Plugin Contributions:: 6

Re: Gap between header and main content...Help!

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.

18 Aug 2007, 17:45

#8

andreadesigns

New Zenner

Join Date:: May 2007
Posts:: 13
Plugin Contributions:: 0

Re: Gap between header and main content...Help!

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

18 Aug 2007, 18:54

#9

dbltoe

Totally Zenned

Join Date:: Jan 2004
Posts:: 9,707
Plugin Contributions:: 6

Re: Gap between header and main content...Help!

Glad you got it goin'

05 Sep 2007, 23:39

#10

spannungsbogen

New Zenner

Join Date:: Sep 2007
Posts:: 2
Plugin Contributions:: 0

Re: Gap between header and main content...Help!

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?

06 Sep 2007, 01:49

#11

dbltoe

Totally Zenned

Join Date:: Jan 2004
Posts:: 9,707
Plugin Contributions:: 6

Re: Gap between header and main content...Help!

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

06 Sep 2007, 01:50

#12

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: Gap between header and main content...Help!

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.

11 Jan 2008, 12:10

#13

crabdance

Zen Follower

Join Date:: Sep 2007
Posts:: 318
Plugin Contributions:: 0

Re: Gap between header and main content...Help!

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

05 Feb 2008, 23:13

#14

piscesfish

New Zenner

Join Date:: Jan 2008
Posts:: 23
Plugin Contributions:: 0

Re: Gap between header and main content...Help!

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/

06 Feb 2008, 11:50

#15

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: Gap between header and main content...Help!

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

06 Feb 2008, 14:31

#16

dbltoe

Totally Zenned

Join Date:: Jan 2004
Posts:: 9,707
Plugin Contributions:: 6

Re: Gap between header and main content...Help!

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

06 Feb 2008, 14:54

#17

piscesfish

New Zenner

Join Date:: Jan 2008
Posts:: 23
Plugin Contributions:: 0

Re: Gap between header and main content...Help!

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:

26 Feb 2008, 00:38

#18

xbrantarx

New Zenner

Join Date:: Feb 2008
Posts:: 3
Plugin Contributions:: 0

Re: Gap between header and main content...Help!

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.

26 Feb 2008, 01:51

#19

dbltoe

Totally Zenned

Join Date:: Jan 2004
Posts:: 9,707
Plugin Contributions:: 6

Re: Gap between header and main content...Help!

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

26 Feb 2008, 04:16

#20

dbltoe

Totally Zenned

Join Date:: Jan 2004
Posts:: 9,707
Plugin Contributions:: 6

Re: Gap between header and main content...Help!

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