Border Didn't Work As Planned

[traytray]

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.

[gjh42]

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%;
}

to
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.

[traytray]

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/

[gjh42]

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;
}

[traytray]

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/

[gjh42]

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.

[traytray]

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/

[gjh42]

If you know how to fix the header menu so it stops at the appropriate spot

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

[traytray]

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.

[gjh42]

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.