Just a couple of z-index & transparency issues...

[operapixie]

Hi again,
So, I went and used a template for this site instead of creating one from scratch. It was just too maddening. And I've made a LOT of modifications to this thing already, and am pretty happy with it for the most part.

But there are a few little items I'm having problems with still http://dev.yourbusybee.com/kaleco/:

• I would really love it if the top banner with the name of the company could sit ON TOP of everything else. I've tried all sorts of combinations of z-index, and I'm just not having any luck. If I need to add another container of some sort, I don't mind.

• I put a miniature version of the logo flower on the menu hover. But the top and bottom are cut off, though I did try and set the overflow to being visible. Perhaps I'm not setting it for the right element?

• The "Active" state for the main menu bar has a nice little transparent box around the item. Unfortunately, it's also causing the text to be transparent as well. IS there a way to solve this? Or am I better off creating a transparent image background instead? I like to avoid those whenever possible, just to improve load times, but if it's necessary...

Just as a note: I've run the page through the validators. So far as I can tell, the only issues seem to be related to cross-browser compatibility styles and the like. So far the site looks good in FireFox, and Safari. I have not checked it in an IE emulator yet.

[Excavator]

Hello operapixie,
Maybe a z-index on what's covering the logo image instead? Like this -

.shadowbox {
    border-radius: 15px 15px 15px 15px;
    box-shadow: 0 -2.6px 7px #CCCCCC;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 960px;
    z-index: 1;
}

[operapixie]

Oh my goodness! That was exactly the trick for the logo. THANK you!

I never would have thought of that for the shadowbox since it's supposed to be starting below the header area.

~Laura