css issue btwn FF and chrome

[familynow]

Hi.

I'm using the mega_menu and the piccadilly_posh template. I'm trying to address and inconsistency between browsers. The menu appears offset in Chrome unless I add a margin: 0px 290px; to #mega-wrapper .mega_menu. However when I add this in FF it's off. Can anyone figure out why I need cross browser css...I'm thinking another element is pushing it in chrome that's not affected by FF?!

littleclosetDOTcaSLASHshop

Thanks in advance.

[rstevenson]

Can't help, but I checked in 4 browsers in Mac OS X, and the menu is pushed off to the right in FF and Opera, but in both Chrome and Safari.

Some of the code in your site, coming from add-ons I'm guessing, is not correct for XHTML which is what Zen Cart outputs. When I validate your home page I get 43 errors and a warning. Perhaps if you fix the errors the issue with the menu just might go away. The first of those erorrs, which causes a cascade of following errors, is coming from the mega menu code.

Rob

[familynow]

Some of the code in your site, coming from add-ons I'm guessing, is not correct for XHTML which is what Zen Cart outputs.

My template is piccadilly_posh straight from Picaflour. I chose it specifically to avoid what I lived through in my current site- a TM template site...To read that is frustrating for me.

Anyway. I'm down to 1 error now related to the Useful Links section of the footer. Despite there being links there the validator shows an empty list ie <ul></ul> Any idea's why that would happen?

[rstevenson]

Hi,

Now that the errors are mostly gone, we can check how the styles are being calculated by the browser. Firebug tells me that in the stylesheet_mega_menu.css there is this...

#mega-wrapper .mega-menu {
    height: 82px;
    list-style: none outside none;
    margin: 0 290px;
    padding: 0;
    width: 680px;
}

That's the second definition in that stylesheet. When I use Firebug to edit that on the fly, removing the 290px from the margin define, the menu slides over where it belongs. (I've only checked in Firefox, so you'd need to confirm it does not mess anything up in browsers which are currently displaying the menu correctly.)

Rob

[familynow]

That's the thing, removing the 290 shifts the menu over to the left by 290 in Chrome.

It comes back to seeming like I need an entry for chrome and one for FF but there must be a way around that.

[rstevenson]

I suspected as much. We know that in general the top browsers will calculate things the same, within a pixel or so. So this much difference has to be coming from the style definitions themselves, and either represents a bug in the stylesheet supplied with the Mega Menu plugin or a bug in several browsers. I'd bet on the stylesheet. I'd guess there are too many conflicting definitions and some browsers are getting confused.

Your only hope (other than contacting the author of the Mega Menu plugin) is to try to simplify the definitions, removing redundancies and clarifying definitions.

Rob

[familynow]

I'm sure your suspicions are right. I'll keep plugging away and see. The likelyhood if me cleaning up and css is a long ways away I'm afraid.

[picaflor-azul]

I'm sure your suspicions are right. I'll keep plugging away and see. The likelyhood if me cleaning up and css is a long ways away I'm afraid.

If you take a look at the template demo you will see that there are no compatibility issues:

http://www.picaflor-azul.com/free-de...iccadilly_posh

I suspect that you have made edits/modifications to the template that are causing the problems. Any time you make changes you will need to re-do cross browser testing.

Thanks,

Anne

[rstevenson]

Taking Anne's note as a clue, I went and picked up the stylesheet_mega_menu.css from both her demo page and from your site and compared them. There are several differences involving margins and other sizing details in yours compared to the stock one. So maybe at this point it would be worth it to put back her stock stylesheet and start again, taking note of your colour changes first, so you can redo them easily.

Rob

[familynow]

Thanks Rob. I'll starting by diff'ing the two and see what's what. I'll report back when I'm done.