I am doing a hover over effect for my nav (text and images)
Starting out with a tray look then upon hover they lighten up.
This effect is working but after the mouse leaves the item it does not go back to its original state apart from in firefox.
Below is a small working object of it without the images and logo.
http://jsfiddle.net/bjxCn/
They seem to go back to the orginal state after doing a scroll to the left or down normally. Seems very strange.
It looks like the problem is that you're nesting div elements rather than li inside ul. That may or may not be is not valid HTML; when I replaced the ul-div-li layout, the weird hover issue went away (albeit breaking the layout): http://jsfiddle.net/GppCG/
Related
Been battling with this for a few days - finally caving in and asking for help.
I'm experiencing a super weird issue in the Edge browser.
Here's the test site: http://edge22.com/test-edge/
When you hover over the menu items, a 1px line appears below the menu item you hovered. There's no border, text-decoration etc.. If the white header area is made black, the line is black etc..
It's like the height of the menu item is reducing by 1px only on hover: http://screencast.com/t/Lpkow3HF0
Now the weird part. This only happens when the element right before the navigation is a link (the "Test" link). If this link is removed, the glitch disappears.
Now if I wrap the link in a div and give it a small margin, the issue goes away:
<div style="margin-bottom:0.1em;">Link</div>
Does anyone have any idea what's going on? I've stripped all of the CSS down to nothing, and can't pinpoint the problem.
I'm not sure if it could fix your problem (as it's not available anymore), but it fixed mine... So for others looking for Edge artefacts that occur on hover ...
I had a somewhat similar issue where a line would appear totally without reason on some elements (and not on other elements using the same style on the same page).
In my case it damaged a menu bar under a fractionally sized image with great repeatability upon hover (and even when not hovering anymore the damage remained).
Simplest solution I found: add a border to the parent in the same color as the background that was damaged ; problem solved.
We have a project page here to check the issue live -> http://hdev.hattrick12.com/
Hovering the Post Elements causes the post height to jump in IE9/Standard for a split second.
It has something to do with .post footer li being display inline - but I need to have the elements either floating or display inline which both seems to cause trouble in IE9.
Can someone point me in the right direction as I can't find anything written on that specific IE Bug?
I found it! It's the min-height of the elements that causes them to switch height for a split second when hovered.
Thx to everyone contributing
I have a really big headache, with my pure css dropdown menu - it doesn't work on any browser.
The problem is with my second level list (subnav) - when i hover over first level(#n) links, it works just fine and displays subnav, but when i try to hover over that list(list items (links)) it rapidly disappears, and i can't select second level links and navigate.
Here is my jsFiddle.
What should i add to my css, to make it work?
Thanks for your time!
You mustn't have an empty space between the top-link and its submenu. Try to use paddings instead of margins.
I've tried positioning the header 'relative' with a high z-index and the content with position relative as well but the drop down hides as soon as I mouse over above where the content starts in IE 7. It's on this page - http://www.legrandconfectionary.com/truffle-flavors/ I thought it has something to do with tool-tip on the truffles but it's happening on every page. Help is greatly appreciated.
I'm going to go out on a limb and say it's related to your tooltip plugin's divs which are left behind after you've no longer hovered over them. You can't see them, but they are there. Try adding this to your CSS file:
.tooltip { z-index: 50; }
Theoretically this will prevent the tooltip from being rendered on top of the UL element making up the drop-down menu. I have a feeling that IE 7 is bubbling the mouseover event onto the hidden tooltip (which probably stops the bubbling at itself) thus cancelling the mouseover event on your UL. Which your nav relies on since IE7 doesn't support :hover on LI elements.
EDIT: After reviewing further I am no longer convinced that it is the div which is created by the tooltip plugin, but I am convinced that what I stated about the plugin cancelling the bubble on the mouseover event. I believe your tooltip plugin is the culprit. Try disabling it and then check if the behavior persists.
As you can see if you go to the link below in IE7/AOL, the layout breaks if you resize the window. However, click the products menu tab and it rights itself. I haven't a clue why or how to fix it, and it looks sloppy. On resizing the page, the logo and breadcrumb trail div stay where they ought to be, but my horizontal nav menu and everything below the breadcrumb div end up about 20-30 pixels off to the right. On refreshing the page, changing page, or opening a pull down menu item, it all falls back into the correct alignment.
link text
It is working as it should. The li elements in the menu are all floating to the available space. If the window does not have enough space they will float to the next available line. Nothing to see here.
Just use the CSS min-width to stop the DIV from becoming too small for the menu. Or consider a rigid layout (as oposed to a flexible one).
Add the following line to your div to make it work.
#outer {
min-width:790px;
}
To fix incorrectly rendered (in ie7) divs, which correct themselves after hovering over something else, mousing out, or any other weird event, use the below jQuery:
if ($("html").hasClass("ie7")){
var tempHolder = $("#ajaxresults").html();
$("#ajaxresults").html(tempHolder);
}
The logic is pretty simple, and I'm imagine you could do it just as easily with javascript's "innerHTML". Just rewrite the html contents of the div that's misbehaving, and this'll cause it to recompute the styles.
As for giving the html or body tag the ie7 class, I recommend taking a look at html5boilerplate.com. If for some reason you can't use their solution, the jquery for it is:
if ($.browser.msie){
if ($.browser.version < 8){
$("html").addClass("ie ie7");
}
else {
$("html").addClass("ie");
}
}