White Gap between EZ-Pages Bar and Header

Hi,
My site https://www.footballflashbacks.co.uk has a gap between the EZ-Pages bar and the header/banner.

Any ideas on how to remove this?

Cheers
Jim

This is an IE quirk and you can search here for several solutions and look at this in your style sheet - but need to determine the quirk to fix

#navEZPagesTop {
	background-color: #abbbd3;
	background-image: url(../images/tile_back.gif);
	font-size: 0.95em;
	font-weight: bold;
	margin: 0em;
	padding: 0.5em;
	}

It looks like you may have removed a <br class="clearBoth" /> after the logo in order to resolve this, but now in firefox the layout is broken.

Add this after the logo instead:

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

and then in your css change .clearBoth {clear:both} to this:

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

What I'm seeing now is an incorrect div on line 178 of your page source. You might want to check as to where divs can and cannot go it both php and html. Firefox is a lot more forgiving than IE. But, in this case, :shocking:

Hi,

Yes I remember removing it now! It didn't work! Somehow I have managed to get the white space removed but, as you say, it isn't working correctly in firefox!

Could you please be more specific with your instructions? I am a beginner. When I removed that text before I didn't really know what I was doing, I was just copying something from another post.

I understand what you are saying, just not exactly where and in which files the extra text needs to go.

Cheers
Jim

I have just put the <div class="clearBoth"></div> code at the bottom of the tpl_header.php file, was that right? It has seemed to work except that the EZ-pages links are not where they should be, but are in the correct place in IE.
Any ideas?

I haven't done the 2nd part of what you told me to do yet - I don't really understand it.

Thanks
Jim

jimmybob:

I haven't done the 2nd part of what you told me to do yet - I don't really understand it.

Thanks
Jim

It means that you should add those stuff in your stylesheet.

See https://www.zen-cart.com/tutorials/index.php?article=43 and https://www.zen-cart.com/tutorials/index.php?article=147 for some basic info on stylesheets.

HTH,
Shirley :)

You have the <div class="clearBoth"></div> in the wrong location.

Move it to just after the LOGO only. Right after

<!--eof-header logo and navigation display-->

Then open up includes/templates/YOUR_TEMPLATE/css/stylesheet.css and follow the replace the .clearBoth like I mentioned above.

Thanks I have done that bit too now - It didn't seem to do anything (but maybe I'll just never know!) :smile:

I just have two problems now:

1. On firefox the EZ-Pages links are not in the right place

2. There is no gap/space between products that are listed (their pictures are touching)

Thanks
Jim

jimmybob:

Thanks I have done that bit too now - It didn't seem to do anything (but maybe I'll just never know!) :smile:

I just have two problems now:

1. On firefox the EZ-Pages links are not in the right place

2. There is no gap/space between products that are listed (their pictures are touching)

Thanks
Jim

1. See my post above

2. You can add this to your stylesheet (doesn't matter where you add it):

.productListing-data {padding:.5em;}

OH NO! Now its worse! :ohmy:

I have put the code after the logo as you said but now there is a gap above the header on IE, and the whole thing is messed up again on Firefox!!!

Sorry about this.

Jim

jimmybob:

OH NO! Now its worse! :ohmy:

I have put the code after the logo as you said but now there is a gap above the header on IE, and the whole thing is messed up again on Firefox!!!

Sorry about this.

Jim

You put the <div class="clearBoth"></div> before the logo. it needs to go after THIS:

<!--eof-header logo and navigation display-->

You put it after this:

<!--bof-header logo and navigation display-->

I find this in the page source:shocking:
You either have edited SEVERAL files and left out some important PHP code or this is one of those lovely purchased templates. The two "deprecated" lines should not be there. Plus there's the div inside the font later on.```php

<!-- bof upload alerts --> <!-- eof upload alerts --> <div class="centerColumn" id="indexDefault"> <h1 id="indexDefaultHeading"></h1> <!-- deprecated - to use uncomment this section <div id="" class="content">This is the main define statement for the page for english when no template defined file exists. It is located in: <strong>/includes/languages/english/index.php</strong></div> --> <!-- deprecated - to use uncomment this section <div id="" class="content">Define your main Index page copy here.</div> --> <div id="indexDefaultMainContent" class="content"><font style="BACKGROUND-COLOR: #339933"><div class="content" id="pageTwoMainContent"><h1 align="center"><u><font style="BACKGROUND-COLOR: #ffffff" color="#009900" size="4">The Home of Classic Football Pictures</font></u></h1><p align="center"><font style="BACKGROUND-COLOR: #ffffff">Here at Football Flashbacks we specialise in Pre-WW2 reproduction prints of classic Football team, player and action pictures - Please read our <a href="http://footballflashbacks.co.uk/shop/conditions.html">Product Details</a> section for more information</font></p><p align="left"><font style="BACKGROUND-COLOR: #ffffff"></font></p><p align="left"><a id="thelink" onclick="function anonymous() { function anonymous() { function anonymous() { function anonymous() { function anonymous() { function anonymous() { function anonymous() { function anonymous() { function anonymous() { function anonymous() { function anonymous() { function anonymous() { function anonymous() { function anonymous() { function anonymous() { function anonymous() { function anonymous() { function anonymous() { function anonymous() { function anonymous() { function anonymous() { function anonymous() { function anonymous() { return fitsInWindow(); } } } } } } } } } } } } } } } } } } } } } } }"></a></p></div></font></div> ```

Hi,

Ok, I have put it in the right place now (I really should have listened more closely to what you were syaing in the first place!)

But now there is a white gap at the top on firefox (Where the home and log in links are)

Everything else looks as good as it ever has so far, so its coming along.

Any help on the above mentioned?

(I did delete TWO bits of that clearboth sort of code from the tpl_header.php file before if thats any help?)

Thanks

Jim

OH NO!

Now I've really messed it up!

I thought I would try adding a different logo at the top (as I have already done before), I thought I did it exactly the same . . . but now look at it!! And that is even using the same image again as before!
What's happened?

So my problems now:

1. Sort the logo/header out
2. White gap at the top on firefox!

Hope you can help.
Jim

jimmybob:

OH NO!

Now I've really messed it up!

I thought I would try adding a different logo at the top (as I have already done before), I thought I did it exactly the same . . . but now look at it!! And that is even using the same image again as before!
What's happened?

So my problems now:

1. Sort the logo/header out
2. White gap at the top on firefox!

Hope you can help.
Jim

Is that the new logo, or the old logo? It looks like its is damaged when saved... I'd try resaving it again from the original.

You still need to move the <div class="clearBoth"></div> to below the logo.

For the firefox top gap, try adding this to your stylesheet.

#navMainWrapper {background:#009900;display:block;width:100%;float:left;font-weight:bold;padding:0.2em;}

and then change this:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 1%;
}

to this:

#navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 1%;
}

Thankyou Jade - You are an absolute legend!
It all seems to be looking ok now I think?

Just one more quick question.
I wanted to change the font colour of the EZ-Pages links to White l(ike the home and log in links at the top) - but when I did it made ALL LINKS go white

I done it here, on the stylsheet; should I have done this?

a:link, #navEZPagesTOC ul li a {
color: #000000;
text-decoration: none;
}

a:visited {
color: #000000;
text-decoration: none;
}

Thanks a lot
Jim

a:link, #navEZPagesTOC ul li a {
color: #000000;
text-decoration: none;
}
```First of all, white is #FFFFFF but you probably knew that.  Secondly, look at the first line of text.  Items are separated by a comma so, you not only are changing the EZ links , but every a link in the cart.  Separate them out in the stylesheet to look like```php
a:link {
color: #000000;
text-decoration: none;
}


#navEZPagesTOC ul li a {
color: #FFFFFF;
text-decoration: none;
}

Hi,

I've done it like this

a:link {
color: #000000;
text-decoration: none;
}

#navEZPagesTOC ul li a {
color: #FFFFFF;
text-decoration: none;
}

But they are still black. Any ideas?

Jim

For the ezpage links use this

#navEZPagesTop a {
color: #ffffff;
}