By draganFSD on

Hi to all, i have an issue with CSS background problem padding different on every assigned pseudo class for examp

.menu-path-front {height:60px; width:61px; color:#ef9d00; padding-top:15px; padding-left:15px; padding-right:15px; }
.menu-path-front:hover, .menu-path-front a.active {  background-image:url(../images/menu-596.png); background-repeat:no-repeat; background-position: 0 0; height:60px; width:61px; color:#FFF; }

so when it hover background image is OK but when link is active then it goes padding once more.

I'm limited to use only this code: 

<li class="menu-path-front" id="menu-596"><a class="active" title="" href="/">Home</a></li>

I also spent too many hours searching all over the net to find any similar problem but without success. Hope some1 will help me.

Thanks

⋅ Categories: Drupal 4.5.x or older, Drupal 4.6.x, Drupal 4.7.x, Drupal 5.x, Drupal 6.x, Drupal 7.x

Comments

SweeneyTodd’s picture

SweeneyTodd commented

When you are hovering the background is being applied to the li. When the link is active, the background is being applied to the link. I think you will have to apply the background to the link for all cases.

Try:

.menu-path-front a {height:60px; width:61px; color:#ef9d00; padding-top:15px; padding-left:15px; padding-right:15px; }
.menu-path-front:hover a, .menu-path-front a.active {  background-image:url(../images/menu-596.png); background-repeat:no-repeat; background-position: 0 0; height:60px; width:61px; color:#FFF; }

If you have problems, you may have to display the link as a block instead of an inline element to get the height / width - this might be done anyway elsewhere. I am not sure if you are trying to remove the padding on hover / active link. If so you will have to specifically set them to 0 for those conditions.

Do you have a link to see the problem and post a description of exactly what you are trying to achieve?

draganFSD’s picture

draganFSD commented

I solve the problem. css could be better but it work.

First i add Nice Menu function, where i add SPAN tag with class.
First one for menuparent and second one for all others:

function YourThemeName_nice_menu_build($menu) {
  $output = '';

  foreach ($menu as $menu_item) {
    $mlid = $menu_item['link']['mlid'];
    // Check to see if it is a visible menu item.
    if ($menu_item['link']['hidden'] == 0) {
      // Build class name based on menu path
      // e.g. to give each menu item individual style.
      // Strip funny symbols.
      $clean_path = str_replace(array('http://', '<', '>', '&', '=', '?', ':'), '', $menu_item['link']['href']);
      // Convert slashes to dashes.
      $clean_path = str_replace('/', '-', $clean_path);
      $path_class = 'menu-path-'. $clean_path;
      // If it has children build a nice little tree under it.
      if ((!empty($menu_item['link']['has_children'])) && (!empty($menu_item['below']))) {
        // Keep passing children into the function 'til we get them all.
        $children = theme('nice_menu_build', $menu_item['below']);
        // Set the class to parent only of children are displayed.
        $parent_class = $children ? 'menuparent ' : '';
        $output .= '<li id="menu-'. $mlid .'" class="'. $parent_class . $path_class .'">'.'<span class="gvastudio2">'. theme('menu_item_link', $menu_item['link']).'</span>';
        // Build the child UL only if children are displayed for the user.
        if ($children) {
          $output .= '<ul>';
          $output .= $children;
          $output .= "</ul>\n";
        }
        $output .= "</li>\n";
      }
      else {
        $output .= '<li id="menu-'. $mlid .'" class="'. $path_class .'">'.'<span class="gvastudio">'. theme('menu_item_link', $menu_item['link']) .'</span>'. '</li>'."\n";
      }
    }
  }
  return $output;
}

Then i add this css:

#nice-menu-1 { position: relative; height:60px; }
.menu-path-front { display:block; background-position: 0 0; height:60px; width:91px; color:#ef9d00; }
.menu-path-front:hover { display:block; background-image:url(../images/menu-596.png); background-repeat:no-repeat; height:60px; width:91px; color:#FFF; background-position:0 0;}
.menu-path-front a.active { display:block; background-image:url(../images/menu-596.png); background-repeat:no-repeat; height:60px; width:91px; color:#FFF; background-position:0 0; }
.menu-path-front span.gvastudio a, .menu-path-front span.gvastudio a:hover, .menu-path-front span.gvastudio a.active{ width:91px; height:60px; padding: 0.9em 15px 0.3em 15px; }
.menu-path-forum { display:block; background-position: 0 0; height:60px; width:75px; color:#ef9d00; }
.menu-path-forum:hover { display:block; background-image:url(../images/menu-597.png); background-repeat:no-repeat; height:60px; width:75px; color:#FFF; background-position:0 0;}
.menu-path-forum a.active { display:block; background-image:url(../images/menu-597.png); background-repeat:no-repeat; height:60px; width:75px; color:#FFF; background-position:0 0;}
.menu-path-forum span.gvastudio a, .menu-path-forum span.gvastudio a:hover, .menu-path-forum span.gvastudio a.active{ width:75px; height:60px; padding: 0.9em 15px 0.3em 15px; }
#menu-709 { display:block; background-position: 0 0; height:60px; width:96px; color:#ef9d00; }
#menu-709:hover { display:block; background-image:url(../images/menu-709.png); background-repeat:no-repeat; height:60px; width:96px; color:#FFF; background-position:0 0;}
#menu-709 a.active { display:block; background-image:url(../images/menu-709.png); background-repeat:no-repeat; height:60px; width:96px; color:#FFF; background-position:0 0;}
#menu-709 span.gvastudio2 a, #menu-709 span.gvastudio2 a:hover, #menu-709 span.gvastudio2 a.active{ width:96px; height:60px; padding: 0.9em 15px 0.3em 15px; }

and this is the Nice Menu css

/* $Id: nice_menus_default.css,v 1.6 2007/10/29 16:38:28 add1sun Exp $ */
/*
  This is the default layout template for nice menus, and will provide
  a starting point for the look of your menus. To customize, it's
  recommended to create a custom CSS file using this file as a template,
  then configure the module to use your custom CSS file
  (this is done in the global settings tab of the theme administration.)

  To help understand the CSS, the HTML looks like this, where
    x is a number;
    TYPE is down/left/right;
    PATH is the menu path such as node/343;
    MID is the menu id such as 33):
  <ul id='nice-menu-x' class='nice-menu nice-menu-TYPE'>
    <li id='menu-MID' class='menu-path-PATH'><a href='#'>This is a menu item</a></li>
    <li class='menuparent menu-path-PATH'><a href='#'>A submenu</a>
      <ul...><li...>...</li>
      </ul>
    </li>
    ...
  </ul>

  If you have more than one nice-menu and want to target a particular one,
  use its id (e.g. ul#nice-menu-2).

  See README.txt and the handbook page (http://drupal.org/node/185543)
  for some CSS customization examples.
*/

/******************************
 Global CSS for ALL menu types
******************************/

ul.nice-menu,
ul.nice-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;

}

ul.nice-menu li {
  border-top: 0;
  float: left;
  /* Additional overrides to deal with Garland theme. */
  margin: 0;
  padding-left: 0;
  background-image: none;
  height:51px;

}

/* Overrides for Garland header. */
#header-region ul.nice-menu li {
  margin: 0;
  /* Padding rules are needed to deal with Garland's header line-height. */

  padding-bottom: 0.1em;
  background: #eee;
}

ul.nice-menu a {
  display:block;
  height:50px;
  padding: 0.9em 15px 0.3em 15px;
  color:#ef9d00;
  text-decoration:none;
}
ul.nice-menu a:hover {
  display:block;
  height:50px;
  padding: 0.9em 15px 0.3em 15px;
  color:#fff;
  text-decoration:none;
}
ul.nice-menu a.active {
  display:block;
  height:50px;
  padding: 0.9em 15px 0.3em 15px;
  color:#fff;
  text-decoration:none;
}

ul.nice-menu ul,
/* Repeat for Garland header. */
#header-region ul.nice-menu ul {
  top: 1.8em;
  left: -1px;
  border: 0;
  margin-right: 0;
}

/* Override for Garland header. */
#header-region ul.nice-menu ul {
  top: 1.7em;
}

ul.nice-menu ul li {
  width: 12.5em;
}

/******************************
 VERTICAL (left/right) menus
******************************/

/* This is the default width of all vertical menus. */
ul.nice-menu-right, ul.nice-menu-left,
ul.nice-menu-right li, ul.nice-menu-left li {
  width: 12.5em;
}

/* VERTICAL menus where submenus pop RIGHT (default). */
ul.nice-menu-right ul {
  width: 12.5em;
  left: 12.5em;
  top: -1px;
}

ul.nice-menu-right ul ul {
  width: 12.5em;
  left: 12.5em;
  top: -1px;
}

ul.nice-menu-right li.menuparent,
ul.nice-menu-right li li.menuparent {
  background: #eee url(arrow-right.png) right center no-repeat;
}

ul.nice-menu-right li.menuparent:hover,
ul.nice-menu-right li.over,
ul.nice-menu-right li li.menuparent:hover,
ul.nice-menu-right li li.over {
  background: #ccc url(arrow-right.png) right center no-repeat;

}

/* VERTICAL menus where submenus pop LEFT. */
ul.nice-menu-left li ul {
  width: 12.5em;
  left: -12.65em;
  top: -1px;
}

ul.nice-menu-left li ul li ul {
  width: 12.5em;
  left: -12.65em;
  top: -1px;
}

ul.nice-menu-left li.menuparent,
ul.nice-menu-left li li.menuparent {
  background: #eee url(arrow-left.png) left center no-repeat;
}

ul.nice-menu-left li.menuparent:hover,
ul.nice-menu-left li.over,
ul.nice-menu-left li li.menuparent:hover,
ul.nice-menu-left li li.over {
  background: #ccc url(arrow-left.png) left center no-repeat;
  
}

ul.nice-menu-left a, ul.nice-menu-left ul a {
  padding-left: 14px;
}

/******************************
 HORIZONTAL (down) menus
******************************/

ul.nice-menu-down {
  float: left;
  border: 0;
  height:41;

}

ul.nice-menu-down li {

}

ul.nice-menu-down li li {
	display:block;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-size:12px;
	height:20px;
	background-color:#303030;
/*	background-image:url(down_wshadow.png);
	background-repeat:no-repeat;
	background-position: left top;
*/	top:30px;
	padding-bottom:15px;

}

ul.nice-menu-down ul {
  left: 0;
  
}

ul.nice-menu-down ul li {
  clear: both;
}

ul.nice-menu-down li ul li ul,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li ul li ul {
  left: 12.5em;
  top: -1px;
}

ul.nice-menu-down .menuparent a {
  padding-right: 15px;
}

ul.nice-menu-down li.menuparent,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li.menuparent {
  
}

ul.nice-menu-down li.menuparent:hover,
ul.nice-menu-down li.over,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li.menuparent:hover,
#header-region ul.nice-menu-down li.over {
  
}

ul.nice-menu-down li li.menuparent,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li li.menuparent {
  
}

ul.nice-menu-down li li.menuparent:hover,
ul.nice-menu-down li li.over,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li li.menuparent:hover,
#header-region ul.nice-menu-down li li.over {
 
}
SweeneyTodd’s picture

SweeneyTodd commented

I've only just got your email with the link to your site and was going to look at it. It's good that you managed to sort it out yourself.