Greetings -
Struggeling with a three-level css menu.
Works fine in FireFox and Opera for mac, but in Chrome and Safari the third level "sticks" or "hangs" as a watermark after you move the cursor away.
I have tried a few different things without luck.
Live demo here:
http://www.it-stud.hiof.no/~benteh/tmp/
I have cut away everything else, so this is just the menu css & html.
(PS. there are only three levels on archeology, hominins and environmental)
You may be interested to know that removing the "visibilty: hidden" rule from the ".menu ul li ul" selector (on line 105 of the CSS) fixes the problem for me in Chrome. Checked in FF3.6 and it works too - didn't check it in anything else.
Related
I´m testing my newest design and there is one specific issue I cannot figure out.
It appears that a specifik element is triggering an opacity change when I hover the element.
According to my tests this only occurs in Firefox and IE. It doesn´t happen in Chrome.
My best guess is that this is happening due to some sort of browser specific CSS but I have not been able to locate any CSS on any of the elements that is causing this opacity change.
One of the problems is also that I normally use Chrome F12 when I need to spot source code issues and hover CSS effects are hard for me to locate in Firefox and Chrome.
Here is a link to my test-site where you can see the problem in Firefox and IE when you for instance open the accordeon tab "Vælg Stof Indvendig" and hover the images:
http://www.geniusdesign.dk/Demoer/Tailoredsuits/design-dit-eget-jakkesaet/design-selv-jakkesaet-detaljer
You have css that says the following: .product-field-display:hover { opacity: 0.5; }
Because the .product-field-display element is a span wrapping div's, Chrome is basically making it a non-element (height/width of 0 and no placement on the page). But Firefox is still reacting to it (I guess IE is too).
I can't see your site, but have you used a reset at the top of your CSS? This usually solves problems like this. Some browsers s=do weird things by default!
I'm having a CSS styling problem between Chrome/Safari and Firefox. In both Chrome and Safari, the hidden drop down is correctly positioned, but in Firefox, the subnav menu is off by a few pixels. After looking into the issue with the inspection tools of both browsers, it seems that Firefox is making the #main_nav_bar ul 10px wider than Chrome. The issue I'm having is that I'm not sure how to change this while not messing up the way the nav bar looks.
The link is http://www.tamidgroup.org.
Any suggestions on a fix are much appreciated.
Definitely add a doctype in there. You could also target those browsers with a media query.
Example for chrome and safari
#media screen and (-webkit-min-device-pixel-ratio:0){
//add your browser specific code here
}
That way you can target specific issues you see from one browser to the other.
I am trying to use a menu on my site. So I have prepared it, it works fine on Firefox, Chrome, Safari but not on IE. Here is the link to that little html, its a menu with li items. Any idea how to make it work on IE as well? Also afaik css gradient backgrounds should work on IE, but it does not :
I have a couple dropdown menus that are giving me issues in IE7. I've wasted the entire morning trying to fix it. The client is monitoring the site using IE7 so it's a top priority.
I've got a live demo and a jsfiddle demo set up. Here is the actual site I'm working on today as well just for reference, but the demos have the problems isolated. I left some of the reset css and such in case any of it is related.
There are 2 problems:
Most Important: There are z-index issues with the top menu and the header content in IE7. The headings are above the dropdown.
Less Important: There is a small gap in the top menu between the first link and the dropdown that sometimes causes the dropdown to disappear when moving the mouse to it from the top link. This occurs in at least Firefox 4 and IE 7. This issue doesn't occur in the bottom menu.
I removed javascript, tried removing any clearfix css, whittled down the css and html, switched from html5 to xhtml1 strict, played with the position and z-index properties, and read several articles here and elsewhere about z-index bugs in IE but I still can't get this one to budge.
I don't care about IE6 support or if I have to use javascript, I just need to get it working in IE7 for the client. Any help is greatly appreciated.
To #header and #nav add:
position:relative;
and
z-index:10 //for #nav
z-index:0 //for #header
I've got a flyout menu on a site that I'm building. I'm using a UL nested within the LI. In Firefox it's working beautifully but IE breaks it. (The Pants & Shorts link is the only one with a flyout so far)
Here's the site (a work-in-progress so it's not quite all there):
http://epalla.com/bogeypro/featured/covert-cooler.html
If I set:
.bogeypro_catmenu ul li {
position: static;
}
the submenu does become visible in IE, but in IE6 it flys at the top of the page (absolute positioning is NOT relative to the LI) and in IE7 it still doesn't fly above the product image.
any ideas?
have you seen suckerfish menus? http://www.htmldog.com/articles/suckerfish/dropdowns/
As it turns out, IE7 was taking a dump over the opacity filter. I started from scratch and redid everything from the ground up. I had it working beautifully in both browsers and was wondering what I'd done differently - then I added the opacity filters back in and voila, duplicate results.
I've removed the IE opacity line (below) and all is working beautifully
filter:alpha(opacity=92);