Border Didn't Work As Planned

I attempted to add a black border down the sides of my site, but didn't take into account it would start at the very top and extend beyond the footer.

I need it to begin at the top of the header menu and then **go underneath **the footer and come up around the right side and end at the top of the header menu.

I added:

/bof wrappers - page or section containers/
#mainWrapper {background:transparent;text-align: left;width: 860px;vertical-align: top;border: 1px solid #000000;} what is in red.

Prior to my adding this, there was no border at all.

http://designerperfumesnob.authsafe.com/

Thank you.

You have two rules combining to leave the bottom of the footer about 50px above the bottom of #mainWrapper, when the desired effect was presumably to make this spacing below the entire page.
Changing this rule ```
#siteinfoLegal {
background: none repeat scroll 0 0 #FFFFFF;
clear: both;
color: #444444;
font-size: 0.9em;
line-height: normal;
margin-bottom: 30px;
padding: 0.5em 0 20px;
text-align: center;
width: 100%;
}

margin-bottom: -20px;
in stylesheet_footer_menu.css
will account for this; adding 
margin-bottom: 50px;
to the #mainWrapper rule will bring back the space below the entire page so the border works as you intended.

This worked perfect:

margin-bottom: -20px;
in stylesheet_footer_menu.css
will account for this; adding
margin-bottom: 50px;
to the #mainWrapper rule ...

I still have the border extending upward beyond the header menu. Can it end/begin at the top of the menu?

Thank you.

http://designerperfumesnob.authsafe.com/

By "top of the header menu", do you mean the home/login line?
Try something like
(stylesheet.css, about lines 44 and 66)```
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}
/split into/
#mainWrapper {
margin: 30px auto;
}

#navColumnOneWrapper, #navColumnTwoWrapper {
margin: auto;
}

#headerWrapper {
margin-top: -30px;
}

This is what I did:

/bof wrappers - page or section containers/
#mainWrapper {background:transparent;text-align: left;width: 860px;vertical-align: top;border: 1px solid #000000;margin-bottom: 50px;}
#mainWrapper {margin: 30px auto;}

and

/bof header/
#headerWrapper{margin-top: -30px;}

No change.

If you take a look at the site, you will see the black border on either side that looks like it's growing out of the menu bar. On the right side it runs along the side of the search submit GO button and Checkout and the left side it is close to the edge of the logo.

If you know how to fix the header menu so it stops at the appropriate spot, that would be helpful as well.

http://designerperfumesnob.authsafe.com/

I'm getting
Firefox can't find the server
even when I reopen the tab where I was looking at the site before...

The code I posted worked when I tried it on your site before.

I pasted the code on the bottom of the sytlesheet. Is that ok? Will you try my site again, please. I still see the border.

http://designerperfumesnob.authsafe.com/

If you know how to fix the header menu so it stops at the appropriate spotI don't know what you think the "appropriate spot" is. Where exactly do you want the black line border to end?

gjh42:

I don't know what you think the "appropriate spot" is. Where exactly do you want the black line border to end?

The black border is running horizontally across the header into the background area. I wanted it to run across/down the white area only. It is doing that nicely down the sides and the bottom. I think if it stops just where the curve of the header menu begins, where the white area begins, it will look better. The black border will blend seemlessly in that way. Once it extends beyond that point into the background, all you see is a black line.

That is basically just increasing the margin and negative margin on main and header wrappers.
You have rules that affect these all over the place, which makes it much harder to control. Move the #mainWrapper and #headerWrapper rules from the bottom of the stylesheet, and modify rules near the top like this:
(old)/*bof wrappers - page or section containers*/ #mainWrapper {background:transparent;text-align: left;width: 860px;vertical-align: top;border: 1px solid #000000;margin-bottom: 50px;} #headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {margin: 0em;padding: 0em;} #navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {margin: auto;} (new)```
/bof wrappers - page or section containers/
#mainWrapper {background:transparent;text-align: left;width: 860px;vertical-align: top;border: 1px solid #000000; margin: 134px auto 50px;}

#headerWrapper{margin-top: -134px !important;}
#contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #popupAdditionalImage, #popupImage {margin: 0em;padding: 0em;}
#navColumnOneWrapper, #navColumnTwoWrapper {margin: auto;}

#headerWrapper{margin-top: -134px !important;} needs the !important because there is still some rule with #headerWrapper in it that sets the margin. I'm not going to take more time to try to find it, but you might want to so you can simplify the rule without the !important.

gjh42, I sincerely appreciate your help. Unfortunately, the new code shortened the header area, so while it did affectively hide the horizontal black border running across the top of the header background, it pushed the logo up to the top of the header. I might consider changing the logo, that's how much I like the border, but I still have the black lines running up the sides of the header on the background.

Then just change the #mainWrapper margin as desired:

#mainWrapper {background:transparent;text-align: left;width: 860px;vertical-align: top;border: 1px solid #000000; margin: 154px auto 50px;}

I have a similar problem on my site http://www.knicknacs.com.au. I am happy with how the site looks, but I cannot get the border round the page to work. Ultimately I would like the "swirly" border to show on both left and right of the main page, and perhaps 100px below the footer, and the whole page to be centered. I have looked at several solutions, but none seem to work for me. The page is set to 1300 wide, but the whole site is set to the left rather than centered. I currently have a body margin set to 100 pixels, and this looks initially fine on my own screen. However, when I zoom out it become apparent that there is a problem. I does not look fine on other screens either . I have played around with firefox inspect element, made some changes, but nothing makes the change that I want. I am sure there is a conflict somewhere, but I am not experienced enough to figure it out. Is anyone able to help? I am running version 1.5.1

My screen is less than 1300px wide, so I get the site with 100px swirly background on the left, with a horizontal scroll and no background on the right. I think you will do better by giving the body a margin: 100px auto 100px; so left and right are equal.

BTW, what you are dealing with is background, not border.

Hi gjh42. Thank you for replying. My newby ignorance is just shining through, Of course it is background :-0. I tried what you said and adjusted my stylesheet body margin. It did however still not do what I want it to. I now have a 100 margin ( background) at the head and foot of the page. No margin on the left, and still that wide expanse of "swirl" to the right when I zoom out. With my screen zoom reset I have no border ( background) on the right at all. Perhaps I am coding it wrong and not putting in something that should be there.( see my experience shines again !! :-)) . Any other suggestion?

Your site will always display as it does as long as your #mainWrapper width is set to 1300px. Most people, (including me) don't have monitors capable of rendering that resolution (the Web Developer's Dilemma). If you want everyone to be able to see all of your site without horizontal scrolling (and you do) you'll have to set the width of #mainWrapper to 100% and change your header image to separate images on that gradient background.

Assuming you want the swirly background on left & right whenever there is enough space for it, you need to apply the margin: 100px auto; to #mainWrapper, not to the body rule.

Making the site simply 100% or any particular percentage will cause undesirable results at very large or very small sizes. Short of a fully responsive template, you might use max-width and min-width declarations along with a percent width. Look at https://www.w3schools.com or other CSS tutorials for information on how to use these, as they are generic CSS techniques not related just to Zen Cart.

Thank you Steve and Glen for your replies. I tried the #Mainwrapper margin as suggested, but as before on the body wrapper margin, it left me with no margin on the left, top or bottom and a HUGE right swirly expanse. So back to my previous settings until I get my head around the min-width , max-width declarations. I had also previously tried the 100% rule ( not nice unless I tinker with my header some more sometime in the future). I had already discovered https://www.w3schools.com previously ( great teaching site), but was not aware that they covered css in such great detail. Back on the learning curve for me. :-). I may set my site to a more popular 1270, but as I am also trying to anticipate more mobile traffic in the future I should learn a bit more. Cheers

You must have had some conflicting rule or condition in place. When I tried #mainWrapper {margin: 100px auto;} on your site in Firebug it worked fine (just adding it to the bottom of your stylesheet).
I see that the main #mainWrapper {} rule is followed by a group rule which overrides the margin setting. You need to remove #mainWrapper from the later rule.

/*wrappers - page or section containers*/
#mainWrapper {
	background-color: #fff;
	text-align: center;
  	width: 1279px;
	vertical-align: top;
        margin: 100px auto;
	}

#productDescription {
        text-align: left;
        }

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: 10px;
	} 

Thanks again Glen. I set #mainwrapper to {margin:100px auto} and removed the later rule, and it does look better, but still not exactly what I am after. I will need a little more time to investigate the min, and max width declarations to see if that will deliver the effect that I am after. Meanwhile, if someone has a solution to getting more than 24 hours in a day, I would like to hear that too. :-)
Cheers