White Space V73635r4

Hi,

Been playign at Zen Shop for two weeks now. I am trying to get our shop (http://secure.monexbase.com/shop) to look like our base site at http://www.monexgroup.com/new).

2 Things

• ANY HELP in making this less of a burden (and trust me I bought the book and files on-line) would be greatly appreciated.

• try as I can, and I've tried what I have waded through here, but the white gap under the header, and the odd sizes of the boxes are driving me insane.

Help...

Alan...Newbie it seems...

There is quite a bit of stuff going on moving things around on your page.

in your .css file

.leftBoxContainer {
border:1px solid #FFFFFF;
margin-top:1.5em;
}

is causing gaps in the left column.

There is also a

causing trouble running around the top (white space between the nav bar and the pic in your header)

It's hiding in your tpl_header.php file

More to follow as I have time to look for them :P

TMC_Sherpa:

There is quite a bit of stuff going on moving things around on your page.

in your .css file

.leftBoxContainer {
border:1px solid #FFFFFF;
margin-top:1.5em;
}

Thanks, that was helpful (though im not the OP)

You may have an answer to my quandry.

I have my logoWrapper set to the same size as my logo but there is white space around the logo.
This is fine but I would like to understand why and be able to adjust it to taste.


Thanks,

Rick

You may have padding in #logoWrapper or #logo, or margin in #logo... or even possibly margin in #logoWrapper...

A URL would let us identify it positively.

gjh42:

You may have padding in #logoWrapper or #logo, or margin in #logo... or even possibly margin in #logoWrapper...

A URL would let us identify it positively.

Hi,

I will have a look ,

the page is here...

https://www.eyefultower.co.uk/shop

Note that the logo behaves differently in Firefox (space all around) and IE (aligns at the top)

Thanks,

Rick

EyefulTower:

Hi,

I will have a look ,

the page is here...

https://www.eyefultower.co.uk/shop

Note that the logo behaves differently in Firefox (space all around) and IE (aligns at the top)

Thanks,

Rick

Your logo actually has white space around the bottom and left, and its actually part of the image...

In firefox, its the margin-top of this section that is causing the top gap:

h1, h2, h3, h4, h5, h6 {
margin: 0.3em 0em;
}

Your tagline is an h1, so that margin is causing the gap above the logo.

Changing it to this will remove that gap:
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding:.3em 0;
}

jettrue:

Your logo actually has white space around the bottom and left, and its actually part of the image...
Yeah, I put that in to improve alignment in FF
In firefox, its the margin-top of this section that is causing the top gap:

h1, h2, h3, h4, h5, h6 {
margin: 0.3em 0em;
}

Your tagline is an h1, so that margin is causing the gap above the logo.

Changing it to this will remove that gap:
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding:.3em 0;
}Thanks

jettrue:

Your logo actually has white space around the bottom and left, and its actually part of the image...

In firefox, its the margin-top of this section that is causing the top gap:

h1, h2, h3, h4, h5, h6 {
margin: 0.3em 0em;
}

Your tagline is an h1, so that margin is causing the gap above the logo.

Changing it to this will remove that gap:
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding:.3em 0;
}

Ok so that removes the gap above the image in both Firefox and IE.
So how do I have equal gap in both browsers?

I could add whitespace to the image itself but wondered if there was another way.

Give margins to #logo or #logoWrapper in your stylesheet.

gjh42:

Give margins to #logo or #logoWrapper in your stylesheet.

The odd thing is that to have even whitespace under the logo, I have the logowrapper height set to 87 yet the image is 95.

I feel like there is a margin, or padding defined for something else, causing space between logowrapper and navcattabswrapper which unless I can get rid of I will be stuffed.

EyefulTower:

The odd thing is that to have even whitespace under the logo, I have the logowrapper height set to 87 yet the image is 95.

I feel like there is a margin, or padding defined for something else, causing space between logowrapper and navcattabswrapper which unless I can get rid of I will be stuffed.

Change the <br class="clearBoth" /> that is under the logo:

to this:

Then in the css change:

.clearBoth {clear:both}

to:

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

That will get rid of the large gap that is below the logo, and then you should be able to style the logo correctly with the right height.

jettrue:

Change the <br class="clearBoth" /> that is under the logo:

<div id="logoWrapper"> <div id="logo"><a href="http://www.eyefultower.co.uk/shop/"><img src="includes/templates/classic/images/logo.gif" alt="Eyeful Tower - Save ££s on your next pair of specs" title=" Eyeful Tower - Save ££s on your next pair of specs " height="95" width="226"></a></div> <div id="taglineWrapper"> <div id="tagline"><h1>Online Eyewear and Accessories</h1></div> </div> </div> **<br class="clearBoth">**

to this:

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

I'm not being lazy I promise, I have had a good scour, but which file do I find the above in?

EyefulTower:

I'm not being lazy I promise, I have had a good scour, but which file do I find the above in?

In the same file as the logo is. :) includes/templates/YOUR_TEMPLATE/common/tpl_header.php

jettrue:

In the same file as the logo is. :) includes/templates/YOUR_TEMPLATE/common/tpl_header.php

Cheers,

There are so many different places to edit I forget where I have been.

I must start taking notes.

Well I finally got to the bottom of this.

In commenting out a line I had forgot the closing */ and had effectively commented out a whole load more than I thought.