#navCatTabsWrapper

Hello to everyone...

I've been playing around with the design of my website for a couple of weeks (www.soundfactory.nu) and I 've disabled "navMainWrapper" and "LogoWrapper".

For the web store I am only displaying "headerWrapper" and "NavCatTabsWrapper". However NavCatTabsWrapper won't center to the middle of the page. The element is aligned to far to the right and outside of the margin settings for #MainContent. It's also not possible to align #NacCatTabsWrapper to the center using the "margin-right" command in my stylesheet.css. However it is possible to align the #NavCatTabsWrapper to the right using the "margin-left" command which moves the wrapper further to the right...

Or to just make it simple: I can't align the NavCatTabsWrapper to the center of the page...

Anyone's got any ideas?

Thanks a lot!
Soniccc


Website: www.soundfactory.nu

How big is the misalignment you see? I see about a 3px shift (in Firefox).

This is caused by trying to specify too many properties. In your stylesheet, change #navCatTabsWrapper as shown

Code:

---

#navCatTabsWrapper {
    background-image: url(../images/nav_cat_bg_2.jpg);
    background-repeat: no-repeat;
    /*margin-top: 220px;
          margin-bottom: 0px;*/margin: 220px -3px 0;
    height:50px;
          /*width: 964px;*/
        background-color: #000;
        font-weight: bold;
        font-size: 110%;
        font-family: verdana;
        vertical-align: middle;
        border-style: solid;
        border-color: #fff;
        }

---

Specifying a width causes the border to be added to the width. It will default to 100% anyway. The negative side margin pulls the border out to match the headerWrapper border.

Man, I wish I could buy you a car. The Wrapper is perfectly aligned. It's a pleasure to see the code "in action"!

Kind regards
Soniccc