space at top of columns? confused

[SysFix]

my site = http://######-shop.sysfix.co.uk

If you look at the left and right columns, if I use a background color, you can see that there is a gap at the top of each column

I've tried adding margin; 0px; border:0px and also padding: 0px in the following css area but nothing... Any ideas.



/*The main content classes*/

#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {

vertical-align: top;
background-color: #EEECE7;
}

[kuroi]

This isn't a gap at the top of your columns. It's a gap above each of your boxes. Look for example at the same sized space above the information box.

This spacing comes from the following settings in your stylesheet:

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

.rightBoxContainer {
border: 1px solid #ffffff;
margin-top: 1em;
}

A margin-top of 1em in this context is equal to 10px.

[Chrome Orange]

leftboxcontainer

change the margin value

[Chrome Orange]

leftboxcontainer

change the margin value

too slow :)

[SysFix]

hey thanks for that -
It's times like this I wish I never asked the question though as when one problem is solved, another appears and that now being my center column isn;t alingned with the rest or the store. ugh!

[kuroi]

hey thanks for that -
It's times like this I wish I never asked the question though as when one problem is solved, another appears and that now being my center column isn;t alingned with the rest or the store. ugh!

We're making it too easy for you, you're getting lazy Since you dealt with your left column and your right column, now it's got to be the center column, right? And it's got to something to do with padding or margins, yes? So just go find where the padding or margins are set for centerColumn

[SysFix]

I already have the following css in my stylesheet which is why I was confused..

.centerColumn{
margin-top:0px;
padding-top:0px;
border-top:0px;
}


There is no empty line in my define_page as the first html code is an <img> tag, unless of course theres an &nbsp in the code somewhere on a php page

[kuroi]

I already have the following css in my stylesheet which is why I was confused..

.centerColumn{
margin-top:0px;
padding-top:0px;
border-top:0px;
}

There is no empty line in my define_page as the first html code is an <img> tag, unless of course theres an &nbsp in the code somewhere on a php page

Apologies, I saw that you also have

.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0.6em;
}

and fired off my response too quickly.

You could make your site look good by setting your margin-top to -4px causing the div containing the image to ride up over the space and align with your side columns. But its better to get rid of problems rather than cover them up.

So, here is the root of your problem

<h1 id="indexDefaultHeading"></h1> 

It sits at the very top of centerColumn and even though it is empty, still has margins. Remove this and all will be well.

As an aside, you are basing your work on a copyrighted design, which is a bit naughty even if you intend to make significant changes, and completely unacceptable if you don't (as you would be ripping off somebody's livelihood). And to rub salt in the wound you are linking back to the template site for the images (i.e. stealing their bandwidth). If you need further help on this project, please would you let me know what your overall intentions are, so that I can judge whether it's appropriate to provide it.

[SysFix]

I'm using the design purely for learning purposes.
I will be changing all the images, layout, sideboxes etc but until I know how css works fully, I will never be able to customise the site to my own design.

To be honest, the template monster site is infact a simple zen store with nothing more than a few images and aligned content.



Thanks for your reply to my posts. I'll check that out.

[kuroi]

I'm using the design purely for learning purposes.
I will be changing all the images, layout, sideboxes etc

until I know how css works fully, I will never be able to customise the site to my own design.

This is too high a target. I was about to write that I believed that only Eric Meyer and Jeffrey Zeldman fully know how CSS works - then I remembered that in the preface to Eric's book "on CSS", Jeffrey admits to turning to Eric when he gets stuck. There are Zen-like levels of complexity to be overcome here; don't let not having mastered them all hold up branching off on your own. CSS is best learnt by setting your own challenges and overcoming them.

To be honest, the template monster site is infact a simple zen store with nothing more than a few images and aligned content.

Yep. I believe that Template Monster sometimes refers to them as skins. And whilst they weren't that complicated to construct with tables, they're even easier with CSS.