a few CSS fixes, please

I am changing my cart from filling the whole screen (100%) to leaving a bit of border on each side. I had to redo some images, etc, which I am still optimizing, but there are some CSS issues I have not figured out.

A good page to look at is http://www.photoimprints.com/stainless-steel-personalized-travel-mug-p-9.html.

1. One thing that has bugged the heck out of me all along is that upon first load of any page in my site, the Left Box Container shows up first in the middle of the page.
2. The logo is not centered in the header wrapper. Haven't been able to fix this.
3. The categories under the logo likewise not centered in header wrapper.
4. I used to have a nice border in-between the logo and the categories. Lost that when made the background of headerwrapper black. Any way to put one in?
5. I was able to make the Center Box Heading more narrow, but can't seem to do so with the bottom navigation wrapper (where it says HOME).
6. Something is pushing the Right Box Container very slightly out from under the top heading.
7. The yellowish box around the product discount box is too big.

Now these are the niggling things that are bugging me. If anyone can address any or all of them, I would be most grateful. I have spent a lot of time trying to figure it out, so I'm not being lazy. :)
And if anyone sees any other CSS goofs please let me know.
thank you!

One thing that has bugged the heck out of me all along is that upon first load of any page in my site, the Left Box Container shows up first in the middle of the page
Check with you host to see if you can be moved to a less taxed server, or check with certified hosting here.
The logo is not centered in the header wrapper. Haven't been able to fix this.
To address this you have a couple of issues to correct for; in the css find

#logoWrapper {
	background-color: Black;
	text-align: left;
	width: 85%;
	vertical-align: top;
         }
```Change to this due to it being the "wrapper/container for the logo:

#logoWrapper {
background-color: Black;
width: 100%;
vertical-align: top;
}

#logo {
text-align: center;
}

> The categories under the logo likewise not centered in header wrapper Find this and set the width to 100% as shown

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: Black;
font-weight: bold;
color: White;
height: 100%;
width: 100%;
}

> I used to have a nice border in-between the logo and the categories. Lost that when made the background of headerwrapper black. Any way to put one in?
Back to logo wrapper add the border statement:

#logoWrapper {
background-color: Black;
text-align: center;
width: 100%;
vertical-align: top;
border-bottom: .25em solid #ffffff;
}

> I was able to make the Center Box Heading more narrow, but can't seem to do so with the bottom navigation wrapper (where it says HOME) Started looking at this and found that there are several other items that are duplicated and making adjustment difficult as one does not know if there is the same tag maybe later overriding what one is trying to do.  So start by cleaning up the occurrences of tags and begin with #mainWrapper - it shows up several times with conflicting settings: make the first/main separate entry look at least like this and when deleting others compare the settings assigned there, make note of them and you might have to add one or more to this set of entries. Also did not know when you stated "narrow" if you meant height or width.

#mainWrapper {
margin: auto;
background-color: #FFFFFF;
background-image: url(../images/boxbackground.jpg);
text-align: left;
width: 85%;
vertical-align: top;
}

After you do this one, search for other  duplicate tag entries and combine and or separate into individual entries if required.

Do these things and see what remains.

Thanks, you have been VERY helpful. I still need to work on duplicate entries and cleanup, but I have it looking better. As for the Left Box Container shows up first in the middle of the page, I can't imagine server load is the problem. I have a dedicated server through APlus.net, and only my domains are on it. None of which are yet generating the traffic I desire. :)
I thought the problem might be some code that is loading FIRST, that specifies to center the heading?? Rather like when a site loads and it first loads a strange color background and then your background. Anyhow...
One thing remaining is the box background in the product quantity box. I need to get that pulled in. I will keep looking.

Thank you so much for your help.

Just having a quick look, there are a few instances of an extra wavy bracket at the end of some code blocks. Four to be exact and an improper float declaration(float: center... should be: text-align: center).

In Firefox, something really drags the loading time down. I allowed the normal Java and the Google script, but Live Help and everything under the Trust Logo sidebox would not load. The browser got stuck in a loading loop. Then, I used sloppy IE and everything loaded at once with no right column starting out in the middle. Something do do with a script in that left column, methinks. Seeing how that's the left column is the last to load and keeps everything together.

Oh, I get an Object Expected error in IE... I can neither see the Trust Logo in IE, I suspect there must be a script error there.

Those are some interesting observations, thanks. Yes, the Comodo Trust logo stopped appearing, I just haven't had a chance to figure out why yet.

Disregard my "left" columns, obviously it's got to do with the "right". It was late, insomnia gets me confused all the time and makes me type stupidly. :laugh:

I don't know anything about Java, but if I happen to notice anything more precise about what's going on, I'll let you know.

You can add this to your css to control the input box color

input {
background: #006633;
}

You could also add an image pattern if you wish

One thing that has bugged the heck out of me all along is that upon first load of any page in my site, the Left Box Container shows up first in the middle of the page
Yes! This is really annoying me too. And slightly confusing, in our case it makes it look like they're loading a login page, since the login sidebox is the first one. Anyway, it looks sloppy.

Sorry, styledata, I don't know how to fix this. But, I'll start looking into it and if anyone knows, please post -- I'm wondering if there's a way to anchor that left box container to the left side of the screen during initial page load.

Several divs have margin: auto; applied. That causes the div to center in the whole available space... which for the first div to load, is the whole screen.

You can try commenting out the "margin:auto;" for the relevant div and see if that helps.

You are a genius, Glenn! Thanks!

gjh42:

Several divs have margin: auto; applied. That causes the div to center in the whole available space... which for the first div to load, is the whole screen.

You can try commenting out the "margin:auto;" for the relevant div and see if that helps.

Kudos to you! I believe that fixed the problem. When I commented out margin: auto for #navColumnOneWrapper, the right column appears on the left, where it belongs. I knew it was something simple, just didn't know what.
Many thanks