Apple Zen Support Thread

[jettrue]

Putting the shadow aside for a second.

Can anyone suggest why; Sometimes in FF the page loads so that the logo is squashes a little bit, sometimes it doesn't, and when I right click the logo (in FF) something odd happens.

www.fleshmetal.com.au/137

I don't see the squashing issue, but the second issue may be fixed by changing:

#logoWrapperOuter {
	margin:0 auto;
	background-image: url(http://www.fleshmetal.com.au/137/includes/templates/apple_zen/images/header_bg.jpg);
	background-position: center center;
	width:70em;
	overflow:auto;
	}

to

#logoWrapperOuter {
	margin:0 auto;
	background-image: url(http://www.fleshmetal.com.au/137/includes/templates/apple_zen/images/header_bg.jpg);
	background-position: center center;
	width:70em;
	overflow:hidden;
	}

[ghostcorps]

I don't see the squashing issue

I'll keep looking into it, It may be local issue

but the second issue may be fixed by changing:

#logoWrapperOuter ... etc

Yep its sorted. Never did know what overflow was for, I'll have to do some googling

cheers.

ps. when you view the site can you see the logo clearly (not jagged) AND the shadows? cos on this end the first issue alternates between no shadow and a clear logo, or a squashed logo, with shadows.

[jettrue]

I'll keep looking into it, It may be local issue

Yep its sorted. Never did know what overflow was for, I'll have to do some googling

cheers.

ps. when you view the site can you see the logo clearly (not jagged) AND the shadows? cos on this end the first issue alternates between no shadow and a clear logo, or a squashed logo, with shadows.

Overflow is for clearing the float without additional markup (without using the <div class="clearBoth"></div>). I was having problems with spacing issues and such across browsers, and decided to use that method for that section. Then I read that you could use overflow:hidden instead of auto, which would get rid of the scroll bars. Here's a page with info about this method:
http://www.sitepoint.com/blogs/2005/...ing-of-floats/

Your logo is perfectly clear on my end. Do you have the latest firefox version? When you say the logo has shadows, you mean the shadows that should be to the left and right of the site?

[e81ny]

Please go to the following link and click on the product (green square):

http://www.ejpshop.com/shop/index.ph...&products_id=1

The lightbox seems working fine but the menu stays on top which covers the picture... What should I do to disable the menu when the enlarged picture come up?

Thanks in advance for any help!

[jettrue]

Please go to the following link and click on the product (green square):

http://www.ejpshop.com/shop/index.ph...&products_id=1

The lightbox seems working fine but the menu stays on top which covers the picture... What should I do to disable the menu when the enlarged picture come up?

Thanks in advance for any help!

Try changing the z-index on this section to 1000:

#lightbox {
left:0;
line-height:0;
position:absolute;
text-align:center;
top:40px;
width:100%;
z-index:100;
}

[e81ny]

Try changing the z-index on this section to 1000:

#lightbox {
left:0;
line-height:0;
position:absolute;
text-align:center;
top:40px;
width:100%;
z-index:100;
}

I changed the z-index to 1000 now. If you go to that page, you'll notice that now the image is in front of the menu but the menu is still 100% visible and are even still functioning! Is there anyway to keep the menu behind the transparent black mask and disable the drop down menu?

Here is the link again:
http://www.ejpshop.com/shop/index.ph...&products_id=1

Thanks.

[jettrue]

I changed the z-index to 1000 now. If you go to that page, you'll notice that now the image is in front of the menu but the menu is still 100% visible and are even still functioning! Is there anyway to keep the menu behind the transparent black mask and disable the drop down menu?

Here is the link again:
http://www.ejpshop.com/shop/index.ph...&products_id=1

Thanks.

I'm curious why you're surprised that the menu is "even still functioning!" Why would it stop functioning? I'm not familiar with this add on. But I'm curious why someone would try to access the menu when they're looking at the lightbox'd image? Anyway, I can't think of any way to stop it from functioning (and by the way, it actually doesn't function in Firefox - go figure), but to get it behind the transparent black mask is to change #overlay's z-index to 1000 as well:

#overlay {
-moz-opacity:0.6px;
background-color:#000;
filter:alpha(opacity=60);
height:500px;
left:0;
opacity:0.6px;
position:absolute;
top:0;
width:100%;
z-index:90;
}

Perhaps this adjustment will fix the functioning issue as well?

[ghostcorps]

Your logo is perfectly clear on my end. Do you have the latest Firefox version? When you say the logo has shadows, you mean the shadows that should be to the left and right of the site?

I am using FF 2.0.0.1. Hiding the overflow fixed the mutating-logo part of the problem. But the drop shadow around centercolumnwrapperb still alternates on and off with each page reload. I'll ignore it for now cos its obviously an local FF thing not a problem with the page.


now... I just have to figure out how to extend the shadow up to the menu and logo wrapper and I'm finished :) Feel free to tell me, but I'm sure If I just think about it I'll work it out eventually :)