Apple Zen Support Thread

[jettrue]

Hello again

I have almost finished my personalizations. But, have found a couple more sticking points.

I have adjusted the drop down menu so that the buttons are evenly spread across the Drop Menu, and each drop-down list is the same width as the parent. But, now there seems to be a space between the parent and child, enough to close the menu unless I am super quick. I used to know this stuff from years ago when the flyout menu contribution was still quite new, but I can't remember what to look for and none of my fiddling is fixing the problem.

www.fleshmetal.com.au/137

Thanks :)

You're not thinking about the problem enough.

Ok, first of all, your menu is a little too wide, in IE (at least IE7) the shopping cart drops down.

The reason your having issues is your widths don't match:

div#dropMenu ul ul {position: absolute; width: 11.7em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:11em;}

change the second one to match the first one.

Then you need to make your padding match:

div#dropMenu li a {display: block; padding: .6em 0.3em .6em 0.3em;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center;} 
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: white; text-transform:none;}  /* this is text color on drop-down submenu */

[bradymc]

In the shopping cart side box, the Total price is aligned to the right... but it's ALL the way to the side of the box. I wanted to add some padding to it and I thought that if I modified the "stylesheet.css" at line 697...

.cartBoxTotal {
text-align:right;
font-weight:bold;
}

... to add something like "padding-right:2em;" that this would solve the problem. But it didn't seem to work. I played with several numbers and nothing moved it.

Am I tweaking in the right spot or no?

[jettrue]

In the shopping cart side box, the Total price is aligned to the right... but it's ALL the way to the side of the box. I wanted to add some padding to it and I thought that if I modified the "stylesheet.css" at line 697...

.cartBoxTotal {
text-align:right;
font-weight:bold;
}

... to add something like "padding-right:2em;" that this would solve the problem. But it didn't seem to work. I played with several numbers and nothing moved it.

Am I tweaking in the right spot or no?

It's not working because cartboxtotal's padding is defined in a second spot:

#ezPageBoxList li, .cartBoxTotal {
margin:0;
padding:0.2em 0;
}

remove cartBoxTotal from there, and it'll work where you want it to.

[ghostcorps]

You're not thinking about the problem enough.

lol someone had to say it eventually.

Thanks

To be honest I thought I had matched all the widths.. evidently I hadn't given it enough attention ;p

[ghostcorps]

Also, what happens in ie7? in ie6 the menu bunches to the left! Which isn't really too bad... but being a perfectionist also, It'd be nice to have a consistant experience :)

[jettrue]

Also, what happens in ie7? in ie6 the menu bunches to the left! Which isn't really too bad... but being a perfectionist also, It'd be nice to have a consistant experience :)

I think with the way you want to do this, you will run into that issue, which is why I did it the way I did.

If you do these two tags like below, I think you won't run into the IE issues:

div#dropMenu li a {display: block; padding: .6em 3em .6em 3em;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; }
div#dropMenu>ul a {width: auto;}

Of course, then the drop down's aren't the same size as the menu item above them...and all of the drop downs aren't exactly the same size... but on the other hand, things look more evenly spaced this way (there's the same amount of space BETWEEN each item).

Can I just suggest, that I think it would look more refined without the fine grey box around your logo header.... but that's just my opinion.

[ghostcorps]

I think with the way you want to do this, you will run into that issue, which is why I did it the way I did.

I'm starting to see things your way :)

div#dropMenu li a {display: block; padding: .6em 3em .6em 3em;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; } 
div#dropMenu>ul a {width: auto;}

This makes the menu in ie space evenly, but no matter how small i make the widths, it always throws off the shopping cart to the next line in FF. Personally, I would rather it work to spec in FF and bunch on ie. But I have left it for now for you to look at.

Can I just suggest, that I think it would look more refined without the fine grey box around your logo header.... but that's just my opinion.

Yeh, the border was bugging me too, I just wanted to bring the logo out of the background a bit. Can I, perhaps take the shadow all the way round?

[jettrue]

This makes the menu in ie space evenly, but no matter how small i make the widths, it always throws off the shopping cart to the next line in FF. Personally, I would rather it work to spec in FF and bunch on ie. But I have left it for now for you to look at.

Yeh, the border was bugging me too, I just wanted to bring the logo out of the background a bit. Can I, perhaps take the shadow all the way round?

Really? Cause it's not wrapping to the next line for me in FF. What version of FF are you using?

I think you could probably make the shadows be on the left and right all the way up to the logo, but can you even see it with your background?

[Sunabac]

I am trying to put my EZ-Pages into the drop down navigation, so far without a success. I am assuming this must be done manually, correct? I am trying to use the current "Contact Us" and tried the following:

<li class="submenu"><a href="<?php echo zen_href_link(FILENAME_EZPAGES, 'id=1&chapter=10) ?>'">Our Company</a>
<ul class="level2">
<li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CONTACT_US; ?></a></li>
</ul>
</li>
Since it does not work, could I be given directions please??

[ghostcorps]

Really? Cause it's not wrapping to the next line for me in FF. What version of FF are you using?

I am using FF2.

Sorry, what I meant was: With your solution below, it spaces properly with ie, but not with FF. Which is how I left it for you to look at. But, I am going to put it back the way it was (working in FF and bunching in ie), it doesn't look too tragic and I have more pressing matters. Besides, I dont use ie unless I'm testing how ie handles the page lol

I think you could probably make the shadows be on the left and right all the way up to the logo, but can you even see it with your background?

Its very subtle, except where it just stops before the drop down menu, which makes it look unfinished. I guess I could make the menu bar stretch out like you had it originally, but If I can; I'd like to to leave that as a final option. Thing is, whenever I try to add any kind of border to the dropmenuwrapper it shifts a px or 2 to the right

Here's an interesting twist though. Sometimes the shadow shows, sometimes it doesn't. That has been the case since I added the template (even before fiddling with it), but doesn't really faze me. However, if the shadow shows it makes the logo.gif resize by a px or 2 and gives it jagged lines. If the shadow does not show, the the logo.gif is fine. However the main banner is never touched. I think there are gremlins in the tubes.