View Full Version : Just a couple of z-index & transparency issues...

12-30-2012, 09:27 AM
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.

12-30-2012, 11:32 AM
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;

12-30-2012, 06:46 PM
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.