6 Replies Latest reply on Mar 8, 2010 8:13 PM by Zabeth69

    Background nav image not displaying in some browsers...

    jessegiga Level 1

      Hi,

         I'm in the process of building a website template - still ironing out some bugs, but just discovered that the bacground image in my navigation bar isn't displaying on some browsers (including some versions of IE). It works in IE8 where my primary testing takes place (on both my local drive and from the temporary "live" server, but in most other browsers, doesn't show up...

       

      below is a link to my test page:

      and here is the css with the applicable code in red:
      /*Menu Outer Wrapper*/
      .p7PMMh04 {
      width: auto;
      height: 20px;
      margin: 0 auto;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-weight: bold;
      background-image: url(img/new_bk.gif);
      background-repeat: repeat-x;
      background-color: #000;
      text-align: left;
      line-height: normal;
      }
      /*Hide Sub-Menu in Design View
      Compensate for LI padding on Sliding Doors themes*/
      .p7PMMh04 ul div {
      display: none;
      }
      /*
      TOP LEVEL MENU
      */
      .p7PMMh04 ul {
      margin: 0;
      padding: 0;
      }
      .p7PMMh04 li {
      list-style-type: none;
      float: left;
      width: 120px;
      }
      /* Hide from IE5 Mac \*/
      .p7PMMh04 li {
      width: auto;
      }
      /*Top Level Links*/
      .p7PMMh04 a {
      display: block;
      text-decoration: none;
      padding: 2px 14px 3px 14px !important;
      color: #ffc42a !important;

      /*border-right: 1px solid #8184e6;  */

      text-align: left;
      }
      /*Link hover when no drop down is present */
      .p7PMMh04 a:hover {
      color: #df8f04 !important;

      /*background-color: #DFDFDF;*/
      }
      /*
      Syntax for special classes programatically assigned to first and last links and also LIs
      See user guide for more information
      .p7PMMh04 ul a.pmmfirst {
      border-left: 1px solid #df8f04;
      }
      .p7PMMh04 ul ul a.pmmfirst {
      border-left: 0;
      }*/
      .p7PMMh04 ul a.pmmlast {
      }
      .p7PMMh04 ul li.pmmfirst {
      }
      .p7PMMh04 ul li.pmmlast {
      }
      /*First Sub Level*/
      .p7PMMh04 ul ul {
      z-index: 10000;
      background-color: #333;
      width: 150px;
      background-image: url(img/pmm_carbon_subs.jpg);
      background-repeat: repeat-x;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      }
      .p7PMMh04 ul ul li {
      float: none;

      background-color: #000;
      background-image: none;
      }
      .p7PMMh04 ul ul a {
      padding: 4px 12px !important;
      color: #ffc42a !important;
      border-right: 0;

      text-align: left;
      overflow: hidden;
      }
      /* rollover on 1st level rollovers  */
      .p7PMMh04 ul ul a:hover {
      background-color: #333; !important; 
      color: #df8f04 !important;

      }
      /*Third Level (Flyouts in horizontal menu)*/
      .p7PMMh04 ul ul ul {
      border-top: 1px solid #df8f04;
      border-right: 1px solid #333;
      border-bottom: 1px solid #333;
      border-left: 1px solid #df8f04;
      }
      /*
      SPECIAL IMAGE-BASED RULES
      */
      .p7PMMh04 img {
      border: 0;
      }
      .p7PMMh04 .p7PMM_img {
      padding: 0px;
      border: 0;
      background-image: none;
      background-color: transparent;
      }
      /*
      TRIGGERS and CUURENT MARK RULES
      The Closed state relates to trigger items when their child menus are not showing
      The Open state relates to trigger items when their child menus are showing
      Selectors appended with _left Automatically change arrow position and orientation
      if sub levels are set to fly out to the left
      */
      /*Sub Level*/
      .p7PMMh04 ul a.trig_closed, .p7PMMh04 ul a.trig_closed_left {
      background-image: url(img/pmm_south_medium.png);
      background-repeat: no-repeat;
      background-position: right center;
      }
      .p7PMMh04 ul a.trig_closed_up {
      background-image: url(img/pmm_north_medium.gif);
      background-repeat: no-repeat;
      background-position: right center;
      }
      .p7PMMh04 ul a.trig_open, .p7PMMh04 ul a.trig_open_up {
      color: #000 !important;
      background-color: #DFDFDF !important;   /* This is background color of main dropdown rollover */
      }
      .p7PMMh04 ul ul a.trig_closed {
      background-image: url(img/pmm_east_dark.png);
      background-repeat: no-repeat;
      background-position: right center;
      }
      .p7PMMh04 ul ul a.trig_closed_left {
      background-image: url(img/pmm_west_dark.gif);
      background-repeat: no-repeat;
      background-position: left center;
      }
      .p7PMMh04 ul ul a.trig_open {
      color: #FFF !important;
      background-color: #424242 !important;
      }
      /*The Current Marker (You are here) links*/
      .p7PMMh04 .current_mark {
      font-weight: bold;
      color: #60c3d1 !important;
      }
      .p7PMMh04 ul ul .current_mark {
      color: #FFF !important;
      }
      /*
      Utility Rule used for Clearing floats in Horizontal Menus
      */
      .p7pmmclearfloat {
      clear: both;
      height: 0;
      line-height: 0;
      font-size: 0;
      }
      ---------------------------------------------
      Thanks in advance for any advice,
      Jesse