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
Related
I have an application that contains a vertical scrollbar on the page because one of my two lists on the page can be very long and I want the user to scroll up or down. What I found was that sometimes the user just hovers the mouse over other elements on the page and suddenly if the scroll bar was at the bottom, Chrome causes the scrollbar to jump to the top.
Has anyone seen this behavior in Chrome? It works fine with the other browsers. I tried changing a bottom padding on one of my header div elements:
padding: 0.75em 2em 1.75em 2em;
and it seems to have reduced the problem, but the problem still occurs occasionally. One thing I do notice is that it occurs when one of my lists are too long.
It turned out to be a CSS problem. Whenever, the element was hovered, the CSS added a box-shadow on the element using the :hover selector. This caused the border to increase and caused the list to change size. When I removed the box-shadow, the problem went away. It was not a Chrome problem.
I see you've already solved your problem but I just bumped into a very similar problem where Chrome (and only Chrome) would scroll a list to the top when the first element in the list was hovered. I had no box-shadow but instead had a list with some padding:
.list {
padding: 0 10px;
}
And when a list item was hovered, a negative margin and some padding was added (for a reason I can't really remember):
.list-item:hover {
margin: 0 -10px;
padding: 0 10px;
background-color: lightblue;
}
This didn't change the size of the list, at least not visually. But after seeing your question and answer, I changed it so that the list did not have any padding and instead all the padding and margin was on the list items. Problem solved!
Sometimes the "non-hover" CSS has incomplete information; the "hover" CSS specifies this extra information. Make sure all info (like "top:") specified in the "hover" CSS has an entry in the "non-hover" also.
I have a bug in the rendering of border-radius under all major browsers (tested: IE 9, Chrome, Firefox).
What happen is that I have a menu bar with border-radius, and in there some links width a background color. In order to keep the button inside the shape of the menu, I set a overflow hidden on the menu container. Until there all goes well, but then, there's a little white line appearing on the corner edge.
I made a reduced test case here: http://dabblet.com/gist/3828561
Anyone have a solution to overcome this one? Thanks!
A dimensions-dependent solution...but maybe that's OK since it's a menu bar not a content holder? Anyway, you can set border-radius on your inner elements, give the parent a height, and also use that height value for the line-height of the inner elements.
Once you apply the height/line-height, you don't have to use overflow: hidden.
Since your menu bar has a border radius of 3px, apply the same rounding to the appropriate corners of the first menu item like so:
.outer .inner:first-of-type { border-radius: 3px 0 0 3px; }
And make the corresponding corners of the bar even more rounded, to hide them beneath the first menu item:
.outer { border-radius: 10px 3px 3px 10px; }
http://dabblet.com/gist/3828755
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 implemented a dropdown menu into a website, here:
http://www.gardensandhomesdirect.co.uk/
However, The dropdowns themselves seem to contract prematurely. Its sometimes difficult to keep the dropdown open when moving from the initial button onto an option in the dropdown.
Is this a problem with the code or something is affecting it? Is there anything I can do?
Thanks!
Your dropdown divs .dropdown_Xcolumns have a top margin of 4px, When the mouse is on these 4px it's breaking the hover (unless it's done really fast!).. remove the top margin and all should be well.
If you want the effect of a gap between the <li> and the dropdown div - try a top white border on that div
or alternatively, leave the top margin, and add 4px bottom padding to the container <li>s to make them meet up better
try to change for margin: 4px auto; to margin: 2px auto; for .dropdown_buildings in menu.css
You can try to add padding to each li element. It increase the active surface area of the hover area. When the user hover over the top nav and the sub-menu appears, the user can move the mouse downwards, and since he is now still within the padding area the hover is still activated.
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);