Desperate for help with MENU!!!

I've tried everything under the sun and am out of ideas on how to fix this.

The problem is with my menu at this site:

http://www.chasingamylive.com/zencart

Notice how the last menu item, Archive, is showing up two lines below where it should align with the rest of the menu.

Here's the code:

.menu{background:url(../images/menu_tall.gif) repeat-x left top; margin-bottom:5px; text-align:left;}
.menu .in1{background:url(../images/menu_left.gif) no-repeat left top;}
.menu .in2{background:url(../images/menu_right.gif) no-repeat right top; height:47px; padding:0;}
.menu .in3{padding: 0 0 0 0; text-align:left; overflow:hidden;}
.menu ul{list-style:none; font-family:Arial, Helvetica, sans-serif; font-size:12px;}

.menu ul li{float:left; background:url(../images/menu_bg.gif) no-repeat right top; display:block; width:127px;}
.menu ul li.last{float:left; background:none; display:block; width:121px;}
.menu ul li a{text-decoration:none; color:#FFFFFF;}
.menu ul li span{display:block; padding:13px 0 17px 0; text-align:center;}
.menu ul li a:hover{text-decoration:underline;}

Can somebody please help me with this? I have to get it fixed FAST but everything I tried just keeps it like this.

THANKS!!!!!

Looks OK here in IE6, 7 and 8 and Firefox.

Your home page never completely loads for me - might be that Flash thing.

Really? I loaded it in Firefox and IE8 and the Archive menu is lower...strange.

Well, I see a stylesheet.css file, another called stylesheet_main.css and another called stylesheet_tm.css, as well as stylesheet_css_buttons.css. Are you sure you know how the four of them are interacting? Did the TM template come with the css buttons contribution included? If not, it can be very difficult to modify TM templates, as you may be finding out.

Rob

stylesheet.css contols the warnings & some navigator stuff

stylesheet_tm.css controls the header and footer boxes, menu boxes, and ezpage boxes, products boxes.

stylesheet_boxes controls the layout of the sideboxes.

stylesheet_main contols category, shopping cart, shipping estimator, etc.

I didn't write it, it was a template that was used. I can manipulate the properties in the stylesheet_tm file for the menu boxes and see changes so I know that's the right area. it's just odd that the last one falls off. In the above quote I showed all the code connected to the menu box.

What's odd is it looks fine in some browsers, but not others. So, to answer your question, yes, I'm aware of what these files control.

The footer menu works fine, it is the header menu that malfunctions - and the Archives link ends up "hiding" in the gutter between header and body so it is hard to see.

A very odd case, as if the width of the ".last" item is cut from 121px to 11px or so, it jumps up halfway to where it should be but no further. Increase it to 181px or so and it drops to the start of the next row like a left-floated element should when it is out of space. Firebug doesn't show anything extraneous that applies to that link.

gjh42:

The footer menu works fine, it is the header menu that malfunctions - and the Archives link ends up "hiding" in the gutter between header and body so it is hard to see.

A very odd case, as if the width of the ".last" item is cut from 121px to 11px or so, it jumps up halfway to where it should be but no further. Increase it to 181px or so and it drops to the start of the next row like a left-floated element should when it is out of space. Firebug doesn't show anything extraneous that applies to that link.

Yea, I tried all that. It's like there's some padding or something that won't allow it to go any further so it puts it on the next line. I can't figure it out. I've torn it apart, rebuild it, and still the same thing.

The client wants it fixed but I'm just sitting here with my thumb up my...well, you get where I'm going with this. I can't offer them a solution.

Not sure if this will help, but...

(OS X v10.6.2, most recent browser versions all around)

In Safari and Opera the problem seems to be as you describe it, with just the last link, Archives, being down just at the top of the orange box containing Search. But in Firefox, both Archives and Crew Items are below the others, though not as far down as the other browsers show, and the thin dark gray vertical divider between them is also down there.

My editor tells me there are 57 errors and 5 warnings in the code, by the way.

Rob

rstevenson:

Not sure if this will help, but...

(OS X v10.6.2, most recent browser versions all around)

In Safari and Opera the problem seems to be as you describe it, with just the last link, Archives, being down just at the top of the orange box containing Search. But in Firefox, both Archives and Crew Items are below the others, though not as far down as the other browsers show, and the thin dark gray vertical divider between them is also down there.

My editor tells me there are 57 errors and 5 warnings in the code, by the way.

Rob

what editor are you using that tells you that? I didn't write the code - it was a template. Will rem'd out lines give you errors?

I checked the code in BBEdit; it uses a built-in but standard validator. The page can also be checked at w3.org on its validators.

One problem... you have <br> tags in the code. For XHTML they should all be of the form <br />.

Another... you have a very odd thing happening in the header link code. It's the usual <ul> <li> form, except that there are a bunch of nbsp in between each <li> set. I've never seen that before, and it is surely not necessary, as all such spacing can be done in the stylesheet. (But that's TM for ya.)

Finally, you have the CSS Buttons stylesheet being loaded, but the classes assigned to the problematic set of links mean that CSS Buttons is not being used for them. But there may be some interaction anyway, since CSS Buttons can get involved in the styling of all link elements, I think. But maybe not -- when I try disabling the CSS Buttons stylesheet (using the Developer Tools) nothing changes.

Rob

Thanks for all the help!! I sincerely appreciate it and I'm still learning. I'm not new to coding (been coding off and on for 25 years) just not real familiar with PHP XHTML CSS etc.

Anyway, I added the width:1500px at the end of the line that actually controls the link text:

.menu .in3{padding: 0 0 0 0; text-align:left; overflow:hidden; width:1500px;}

and it appears to be aligning properly, finally.

can you all verify this on other browsers? I only have IE on this machine (I have firefox but I can't get it to uncache and reload the page)

Thanks!!!

Yes, the links are now up where they belong, in both Firefox and Safari here. But I now have a horizontal scroll bar in the browser window. (I keep my browser about 1000 px wide.) I don't see any content that requires that much width.

Rob

rstevenson:

Yes, the links are now up where they belong, in both Firefox and Safari here. But I now have a horizontal scroll bar in the browser window. (I keep my browser about 1000 px wide.) I don't see any content that requires that much width.

Rob

Thanks so much Rob for checking that out for me and pointing it out.

I changed it to 1100 and it looks aligned on my screen without scrollbars.

Is it better on yours?

That will force the dreaded horizontal scrollbar on any monitor that is 1024x768, which is still a substantial number if not the most common any more.
Can you achieve the result with a setting of 1000px?

A little tool I sometimes use tells me that the black area in which the buttons must sit is about 884 pixels wide, so there should be no reason to specify an actual width any wider than, say, 900 px.

Rob

If I change it to 1000 it will drop to the next line.

The minimum I can set it at and have it all line up appears to be 1025.