Page 1 of 2 12 LastLast
Results 1 to 10 of 16
  1. #1
    Join Date
    Aug 2011
    Location
    Near Ottawa, Ontario, Canada
    Posts
    341
    Plugin Contributions
    0

    Default 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.

  2. #2
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,384
    Plugin Contributions
    0

    Default Re: css issue btwn FF and chrome

    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
    Breakfast: the most important donut of the day.

  3. #3
    Join Date
    Aug 2011
    Location
    Near Ottawa, Ontario, Canada
    Posts
    341
    Plugin Contributions
    0

    Default Re: css issue btwn FF and chrome

    Quote Originally Posted by rstevenson View Post
    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?

  4. #4
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,384
    Plugin Contributions
    0

    Default Re: css issue btwn FF and chrome

    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...
    Code:
    #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
    Breakfast: the most important donut of the day.

  5. #5
    Join Date
    Aug 2011
    Location
    Near Ottawa, Ontario, Canada
    Posts
    341
    Plugin Contributions
    0

    Default Re: css issue btwn FF and chrome

    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.

  6. #6
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,384
    Plugin Contributions
    0

    Default Re: css issue btwn FF and chrome

    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
    Breakfast: the most important donut of the day.

  7. #7
    Join Date
    Aug 2011
    Location
    Near Ottawa, Ontario, Canada
    Posts
    341
    Plugin Contributions
    0

    Default Re: css issue btwn FF and chrome

    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.
    Last edited by familynow; 22 Oct 2012 at 05:44 PM.

  8. #8
    Join Date
    Jul 2009
    Location
    picaflor-azul.com
    Posts
    6,939
    Plugin Contributions
    45

    Default Re: css issue btwn FF and chrome

    Quote Originally Posted by familynow View Post
    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
    Mobile Friendly Responsive Zen Cart Design
    Convert your zen cart easily with our Free Responsive Zen Cart Templates
    Check them out!

  9. #9
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,384
    Plugin Contributions
    0

    Default Re: css issue btwn FF and chrome

    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
    Breakfast: the most important donut of the day.

  10. #10
    Join Date
    Aug 2011
    Location
    Near Ottawa, Ontario, Canada
    Posts
    341
    Plugin Contributions
    0

    Default Re: css issue btwn FF and chrome

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

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. v151 calendar issue on firefox and chrome
    By 100asa in forum Basic Configuration
    Replies: 8
    Last Post: 3 Feb 2014, 09:30 AM
  2. HELP! Weird CSS Issue with Safari and Chrome Browsers
    By limelites in forum General Questions
    Replies: 19
    Last Post: 4 Oct 2009, 07:25 PM
  3. Gap BTWN Header and Breadcrumbs
    By byrd813 in forum General Questions
    Replies: 4
    Last Post: 6 Sep 2009, 08:14 PM
  4. CSS Positioning Problem in Safari and Chrome Only
    By limelites in forum General Questions
    Replies: 13
    Last Post: 25 May 2009, 03:40 PM
  5. CSS Issue with IE <UL> and <LI>
    By MCanes in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 29 May 2007, 02:25 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR