css issue btwn FF and chrome

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.

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

rstevenson:

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?

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

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.

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

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.

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.

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

http://www.picaflor-azul.com/free-demos/index.php?main_page=index&template_switch_id=piccadilly_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

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

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

Okay so I uploaded the original stylesheet_mega_menu.css file from the template and worked backwards applying the differences and I'm still stuck with the same issue. I do however, have a much better understanding of where the problem lies.

I don't even know where to begin to explain this though...It's all relating back to bleeding the logo overtop of the main content area. Originally, the logo is an image with a background which allows one to cheap and have the menu slide underneath. I'm using a transparent background and therefore am shrinking the menu background image to the right size so it's not under the logo. So...

In doing so I need to apply the css margins to mega-wrapper .menu_red and adjust mega-wrapper accordingly. Chrome has no problem with this but FF doesn't like it. I don't know enough to know whether it's Chrome being smart and FF being strict or what. But I'm back to needing margin: 0 290 in Chrome and needing to remove it in FF.

One could argue getting rid of the logo bleeding overtop of the main content would be the simplest solution but I kinda like that effect ;)

I just realized I also can't do the border-radius I like if I don't "bleed" the top into the main content.

I may have finally landed on the source of this issue:

/.chrome #mega-wrapper .mega-menu{position:relative;right:300px;}/

in stylesheet.css clearly made the diff btwn Chrome and FF :)

Now that I've commented that out at least both browsers are acting the same!

I often find if I talk to myself long enough, I can solve the problem. :laugh:

Good detective work!

Rob

rstevenson:

I often find if I talk to myself long enough, I can solve the problem. :laugh:

Good detective work!

Rob

+1

Ultimately I'm the only one that knows what I've done to my site so it is quite often a matter of talking it out.