well isn't this a quandry (sp?) Firefox makes this difficult to troubleshoot with its edit css feature as it doesn't handle relative paths to images well, basically is they disappear. So with that said when you turn off the background images you see that the sidebox content are lined up all the way down, no overlap, so we know that it is working correctly. The problem is with the sidebox background images as you can see here:
#navColumnOne {
margin:0;
background-image:url(../images/sidetop-3.jpg);
background-repeat:no-repeat;
padding: 1.3em 1.2em;
}
#navColumnOneWrapper {
background-image:url(../images/sidebottom-4.jpg);
background-repeat:no-repeat;
background-position:bottom;
padding: 0.6em 0.7em 0.4em 0.6em
}
You have the images tied to 2 different things, so of course they don't work together. So when you turn off the one box the column shrunk and the image tied to the bottom of that column moved up.
I would implement this differently. I would go through and figure out all class and ids for the different boxes, including the one for the shopping cart which doesn't appear until something is in the cart (if your gonna use it).
Then the box that you want to be at the top would have the fancy header (Scroller thingy) for the border-top and border-left, -right would be set to double and no border-bottom defined.
Then the next boxes in the lineup would have no top or bottom borders, only border-left, -right.
The last box would have the opposite setup as the top box, no border-top, only sides and bottom.
The classes and ids for the boxes is in the code but not always in the stylesheet, that is the homework make a list of all of them.:smartass:
Implementing them this way would make them dynamic, they would work when you add more content to them. As they are now if you add more content to them then can fit you would have to redo the images. What a pain that would be.
Hope I made some sense and gave you some info you can use
