I am using wordpress on my site, marblesandmore.com, and have a theme that I currently am adjusting. The website is using a menu function build in to wordpress and the items use cufon and css.
The problem is the following: - the last 2 items have an offset...? - This is only visible in chrome and IE.
The php used:
<div id="menu">
<?php $menuClass = 'nav superfish clearfix';
$menuID = 'secondary-menu';
$secondaryNav = '';
if (function_exists('wp_nav_menu')) {
$secondaryNav = wp_nav_menu( array( 'theme_location' => 'secondary-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'menu_id' => $menuID, 'echo' => false, 'walker' => new description_walker() ) );
};
if ($secondaryNav == '') { ?>
<ul id="<?php echo $menuID; ?>" class="<?php echo $menuClass; ?>">
<?php if (get_option('estore_swap_navbar') == 'false') { ?>
<?php show_categories_menu($menuClass,false); ?>
<?php } else { ?>
<?php if (get_option('estore_home_link') == 'on') { ?>
<li <?php if (is_home()) echo('class="current_page_item"') ?>><a href="<?php bloginfo('url'); ?>"><?php esc_html_e('Home','eStore') ?></a></li>
<?php }; ?>
<?php show_page_menu($menuClass,false,false); ?>
<?php } ?>
</ul> <!-- end ul#nav -->
<?php }
else echo($secondaryNav); ?>
</div> <!-- #menu -->
Css:
ul#secondary-menu { padding: 24px 0px 0px 23px; margin-top:24px; }
ul#secondary-menu li { padding-right: 20px; }
ul#secondary-menu li.current_page_item > a > strong, ul#secondary-menu li.current-menu-item > a > strong { color:#ede7c2; }
ul#secondary-menu li a strong { color:#000000; text-transform: lowercase; font-size:16px; font-weight:normal; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); margin-bottom:-3px; }
ul#secondary-menu li a span { color: #828282; font-family: arsmaquettepro,Helvetica, sans-serif; /*text-shadow: 1px 1px 1px #2d2d2d;*/ }
ul#secondary-menu li a:hover { text-decoration: none; }
ul#secondary-menu li a:hover strong { color: #ede7c2; }
ul#secondary-menu li a:hover span, ul#secondary-menu li > a > span { color: #7b786a; }
There should be no difference between the first 4 items and the next 2.
Any idea what causes the offset?
EDIT: The answer below appears to be right, so the solution has to be in the css of the submenu:
ul#secondary-menu ul { width: 178px; background: url(images/secondary-dropdown.png) repeat-y; padding: 3px 0px 15px; box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow:3px 6px 7px 1px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5); border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; border-top-right-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border: 1px solid #ffffff; border-top: none; }
ul#secondary-menu li:hover ul, ul#secondary-menu li.sfHover ul { left:0px; top:43px; }
ul#secondary-menu li:hover ul ul, ul#secondary-menu li.sfHover ul ul { left:173px; top:-3px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border: 1px solid #232323; }
ul#secondary-menu ul li { background: url(images/secondary-dropdown-bottom.png) repeat-x bottom left; padding: 0px 0px 2px 2px; }
ul#secondary-menu ul li a { display: block; padding: 9px 3px 9px 28px; width: 145px; /*font-weight: bold; */font-size:14px; color: #000000; font-family: arsmaquettepro, Helvetica, Arial, sans-serif; /*text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); background: url(images/secondary-dropdown-bullet.png) no-repeat 15px 17px;*/ }
ul#secondary-menu ul li a:hover { background-color: #383838; color: #ede7c2; }
The last 2 object only have a 16px height while the other menu objects got 18px.
edit: Sorry i just realized how bad this answer is without telling you where the problem is.. Will try to check it.
i think it has something to do with the fact that the last 2 menu items has no submenus, somehow those ul tags for the submenus seem to add 2px to the height.
Ok, this is not a "nice" solution, rather ugly to be honest, but i think it works. You can just target the 2 last items in the menu by using their id's and adding a margin at the top.
#menu-item-3606, #menu-item-3604 {
margin-top: 2px;
}
just remember that if u ever change those menu items in any way, they will have new identifiers so you would need to change the id's in the css. As I said, not a good solution but it works.
There would also be problem if you for some reason added submenus to these two menu items.
I think your problem may be is caused by:
margin-bottom:-3px;
in
ul#secondary-menu li a strong
selector.
I can't see your page, so im not sure about that answer.
@Bart van Sleeuwen Please Remove this class from style.css
ul#secondary-menu li#menu-item-3604 strong { color:#666666; }
ul#secondary-menu li#menu-item-3606 strong { color:#666666; }
and Find the li class in html
<li id="menu-item-3604" class="menu-item menu-item-type-post_type menu-item-object-page">
change it to like this
<li id="menu-item-3604" class="menu-item menu-item-type-custom menu-item-object-custom">