space at top of columns? confused

my site = http://sex-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;
}

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.

leftboxcontainer

change the margin value

Chrome Orange:

leftboxcontainer

change the margin value

too slow :)

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!

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!
We're making it too easy for you, you're getting lazy:yes: 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 :thumbsup:

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

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

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.

:smile: So, here is the root of your problem```php

:schmoll: 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.

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.

SysFix:

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

SysFix:

until I know how css works fully, I will never be able to customise the site to my own design.:no:
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.

SysFix:

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.

[QUOTE=kuroi]
:smile: So, here is the root of your problem```php

which file does this php code relate to - its not tpl_main page.

SysFix:

The Dev team have kindly provided you with a specific ID for this heading, so it's quickest and most maintainable to deal with this through CSS.> #indexDefaultHeading {margin:0}would remove the unwanted margins from this empty header alone, or> #indexDefaultHeading {display:none}would supress its display altogether. Both would solve your problem without resorting to changing the underlying PHP (which is a good thing :smile:)

great thanks - now i'm starting to understand this. Only thing is - how did you know it was indexdefaultheading as when in firefox/devTools, that heading does not show up as an id/style. Ie: how can you possibly ever know all the zen Style ID's used or not used.

SysFix:

great thanks - now i'm starting to understand this. Only thing is - how did you know it was indexdefaultheading as when in firefox/devTools, that heading does not show up as an id/style. Ie: how can you possibly ever know all the zen Style ID's used or not used.
Glad to see you're using the devTools. They're invaluable. I particularly like being able to plug in CSS changes using Edit CSS to just confirm that my recommendations will work.

The other thing I do is look at the HTML that has been generated in the area of the problem. Your empty header stuck out as an obvious potential cause. And from there it was easy to just search your CSS (electronically of course) for all settings being applied to h1 headers.

I don't know all the Zen Style IDs, though some are beginning to take on the look of old friends (or enemies). I don't need to know them, because they're all there in the code and once you get a feel for the page layout and the naming convention (credit to the Dev Team for a consistent and logical approach), it gets very easy to work out what each one is there for and how you can style it to your advantage.