Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS css displays diffidently in chrome for windows then chrome for mac

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #34879
    saseo
    Member

    Hi.

    Pretty sure this has been covered before :) I’m currently re-designing our company website on WordPress using the Woo Canvas theme, I’ve used the Canvas theme plenty of times before and never had this issue… At least I don’t think so :P

    The problem that I’m having is that my top menu buttons are displaying differently in chrome for mac then they do in chrome for windows (what I’m working on)

    As a reference, here is a link to what difference looks like

    The code that I’m using now: (still a bit messy though)

    /* Top Navigation (in header) */
    #top { background: none; }
    #top .nav { margin: 10px 0px 0px 50px; }
    #top .nav a { color:#3f3f3d; padding:8px 10px; line-height:18px; text-transform: uppercase; text-decoration:none; text-shadow:none; }
    #top .nav li { margin-right: 5px; border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;}
    #top .nav li a.sf-with-ul { padding-right:20px; }
    #top .nav .sf-sub-indicator { top:40%; }

    #top .nav a:hover { color:#ffffff; border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px; }
    #top .nav li.current_page_item a,
    #top .nav li.current_page_parent a,
    #top .nav li.current-menu-ancestor a,
    #top .nav li.current-cat a,
    #top .nav li.current-menu-item a {color:#ffffff; background: #33607f; border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;}
    #top .nav li.sfHover a {color:#ffffff; background: #33607f; border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;}

    #top .nav li ul { margin:0; padding:0px; width: 180px; border: none; z-index:999;
    /* Box Shadow */
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
    box-shadow: 0 2px 2px rgba(0,0,0,.1);
    }
    #top .nav li ul li:last-child a, #top .nav li ul li:last-child a:hover {
    /* Border Radius */
    border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px;
    }
    #top .nav li ul li { background: #efefef; border:none; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
    #top .nav li ul li a { padding:8px 10px; width:160px; color:#3f3f3d; font-size:0.9em;}
    #top .nav li:hover ul a { background: #efefef; color: #3f3f3d; }
    #top .nav li ul li a:hover { background: #ffffff; color: #3f3f3d; border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;}
    #top .nav li ul li a.sf-with-ul { padding-right:10px; border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;}
    /* added by Kyle */
    #top .nav li a.sf-with-ul:hover { color:#ffffff; border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px; }
    /* added by Kyle */
    #top .nav li ul ul { margin: -34px 0 0 180px; }

    #top .nav li:hover, #top .nav li.hover { position:static; }
    #top .nav li:hover ul ul, #top .nav li.sfhover ul ul,
    #top .nav li:hover ul ul ul, #top .nav li.sfhover ul ul ul,
    #top .nav li:hover ul ul ul ul, #top .nav li.sfhover ul ul ul ul { left:-999em; }
    #top .nav li:hover ul, #top .nav li.sfhover ul,
    #top .nav li li:hover ul, #top .nav li li.sfhover ul,
    #top .nav li li li:hover ul, #top .nav li li li.sfhover ul,
    #top .nav li li li li:hover ul, #top .nav li li li li.sfhover ul { left:auto; background: #efefef;}
    #89519
    jamygolden
    Member

    Is the font being used the same?

    font-family: sans-serif; uses Arial on windows and Helvetica on mac so you may notice small differences there – I think that may be what’s happening.

    #89520
    saseo
    Member

    Ah! that makes sense…I’ll look into that. Thanks for the feedback

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.