I needed to modify jQuery Superfish menu plugin to accommodate using image for the menu.
There are submenus under Om oss and Medieomtale. I used sprites images for this menu.
It works fine with IE8, FF etc. However IE7 has a problem to show submenus. It shows the submenu but when I try to navigate in the submenu, it fades out.
Editor's note
A link in this question to www.okadadesign.no to demonstrate the issue was removed, as it is no longer accessible.
I fixed the z-index problem for IE7 and IE6 by adding: position: relative; and z-index:10000; to the main #nav div that contains the (sf-menu) and the job was done.
I've always had to put a z-index on .sf-menu li li to get the sub-menus to show up in ie6/7.
Using hoverIntent might help too. There are details about on the superfish page.
It also might be something as stupid as not specifying a "background" on .sf_menu li ul. I was using a gradient (filter in IE) and didn't specify the original background color.
background: #F3F3F3; /* required for IE to retain hover state */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F3F3F3', endColorstr='#D8D8D8');
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#D8D8D8));
background: -moz-linear-gradient(top, #F3F3F3, #D8D8D8);
Related
On a submenu on a website (lainegabriel.net), I have bottom borders that disappear on some of the links in the submenu under "Buy". This only appears in Chrome; Firefox and Safari render it properly. I believe the anchor tag is somehow overlapping over elements in the unordered list. But I simply cannot figure out what is happening.
And the problem goes away if you navigate to a page inside the submenu. Otherwise, some of the borders disappear.
Any ideas?
Thanks!
ul.sub-menu li{
float:none}
replace this with ul.sub-menu li{
display:block;
width:100%;}
I've been searching through stack overflow to find an answer to this, but nothing has been helping me (or I've been adding it incorrectly).
I've set up a horizontal menu on a website for a client and am trying to center the menu items within the menu bar, however, the right and left padding is off by 1px between firefox and chrome, which makes the last menu item in the row butt up against the right edge only in Firefox. Dropping the left and right padding in firebug by 1px on the li tags in the menu makes it look like it does in Chrome with my original CSS.
The problem code seems to be on the li tags padding.
Here is a JSFiddle with my menu code (sans background images, but the problem is still evident) http://jsfiddle.net/FxznT/1/
and here is the original site I've been working into for reference: http://clients.taylordesign.com/LCBP/site/home.html
What am I missing? I am already using a CSS reset. Thanks.
You could try and use a CSS hack to select only Firefox:
#-moz-document url-prefix() {
.ul.topNav li {
padding: 16px 11px;
}
}
I have this website where on the left menu there's a nested menu on the "hotel" link. The submenu that appears hovering "hotel" has a gap on the left, but since in the gap the mouse hovers the nested "ul" element there are no problems in Firefox or Google Chrome. But this doesn't work in IE9 (not sure about other versions), infact I can't reach the submenu because it disappears.
Is this a known bug? Am I doing something wrong?
IE9 is seeing the <ul/> padding-left or <li/> margin-left as empty content and so the mouse hover goes straight through it.
I'm not sure why it is doing this but an easy fix would be to add a repeating transparent background image or, if legacy support is not needed, add background-color: (255, 255, 255, 0.01)
Try removing the 20px padding on the nested UL
Then give the UL a margin top of -5px
Then give the nested LI elements a margin-left of 20px
I have a working sprite menu, and want to add a vertical submenu under one of the items. I have it working perfectly in ie and firefox, however in webkit browsers (chrome and safari), the submenu renders to the left of the right margin of the containing li, making the menu unusable. I have tried every css tip I could find to make this work, including overriding the webkit -40padding, yet everything I have tried makes no difference to the alignment in those browsers.
test page
Find your #navigation > li { position:relative } and remove position:relative
Hi I have a dynamic menu where the ul li items change in width depending on the text set in the CMS (Joomla). They want the menu item, on mouse over, to both have 1. a repeated background image and 2. an image placed at the top (http://screencast.com/t/Zjk4YTJmNGQ).
Now, I'm great with doing the repeated background image on a mouse over and that would be great, but I am not sure how to get both of these images in one css declaration.
Any help would be greatly appreciated, as I haven't learned this technique yet :(
If it's a menu, the relevant markup should probably resemble <li>…</li> — that's two elements, which is plenty for two background images.
Firefox 3 and Webkit browsers support multiple backgrounds.
background: url(image1.png), url(image2.png);
background-repeat: repeat-x, no-repeat;
background-position: top right, 90% 5px;
You could also try to get this working by using the :after pseudoclass.
.menu li {
position: absolute;
background: url(image1.png);
}
.menu li:after {
content: '<img src="image2.png">';
}
You can find a nice example here:
http://s3.amazonaws.com/nettuts/690_textGradients/index.html