On a clients website (HolidayHomes.ca) the dropdown menu doesn't appear to be working in Internet Explorer, not really sure how to go about fixing this..
It appears to have something to do with text-indent on the ul li.inner class. It was grabbing text-indent: -2000px; from #nav li, all of my submenu li's have the class .inner
I've tried adding text-indent: 0px !important; to ul li.inner, but it doesn't seem to be working? However I've noticed if I remove the text-indent from #nav li completely, it works fine?
Help is appreciated! I'm pulling a LOT of hair out over this.. and I'd rather fix it then have to install a new dropdown menu script completely... ugh.
Which flavor of IE is having a problem. In IE 8 and up you can turn on the developer toolbar and walk through the code (similar to firebug in firefox)
just pulled up the site in IE 8 and it appears to be working ok. What is the problem you're having?
After a few more hours of troubleshooting, I was able to fix this error by removing display: inline; from my #nav li ul element. :)
Related
See here: codepen.io/arnaudfabs/pen/waXWJLenter code here
I am using Zurb Foundation 5 to build a mega menu. I need the item name and its price on the same line for each product.
I added a span float right for the price and it shows well on Chrome and IE.
In Firefox, the price is going out of the li tag and is not even clickable.
See pictures:
Good:
Bad:
Any thoughts on what to do?? Thanks!
Removing the style white-space: nowrap; on .top-bar-section .dropdown li a seems to fix your problem in FireFox.
or just override it like this:
.top-bar-section .dropdown li a{
white-space: normal;
}
I just discovered that the CSS dropdown menus on this site do not work in Internet Explorer. Not at all, absolutely nothing shows.
The menus work just fine in Firefox, and in Android
Here is the site: http://anlea.org
I've tried a number of fixes, but nothing makes the dropdown menus show up.
Any (simple!) solutions would be greatly appreciated
IE doesn't always play nice with li:hover which is what your CSS menu appears to be relying on. The accepted answer to this question may be of help: IE8 does not hover when using an li with position:absolute
You are not displaying the nested ul on hover, just the li's inside the nested ul. Try adding this:
.main_menu > ul > li:hover > ul {
display: block;
}
also i would advise you to work with child selectors so something like this:
.main_menu ul li /* this would also apply to the submenu's, you overwrite them later in your code */
would become
.main_menu > ul > li /* this will only apply to the top level menu */
for nested menu's. This should not brake the code, but will keep you much more in control and avoid unexpected results.
if you want all li to have the same background for example, both top level and nested, you could still use
.main_menu li
I'm using IE9 to view the site and the menu works fine, only after I switch back to IE9 Standard Mode.
Your site defaults to the Quirks Mode in IE9.
You can refer to here: http://blog.timolthof.com/disable-quirks-mode/ to try to disable Quirks Mode.
height and width of the drop down should be given in px not in % some versions IE does not support width and height in %
I need to copy a menu from this wordpress installation http://bit.ly/rrWFMH into some non-wordpress php pages.
I moved the menu code to http://bit.ly/vcUn1s . At first I used the original wordpress CSS file and it worked without problems. However, after stripping that css file down I got working menu, but for some reason menu items and items in dropdowns are shifted to the right. I've been trying to fix it for hours , but still no luck...
Can anyone expert in CSS point me out what is wrong with my css, pretty please? :))
I love you guys!
Add a style declaration of padding:0; to your #access .menu-header ul, div.menu ul declaration and that should do the trick:
#access .menu-header ul, div.menu ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
I am developing my first website using html5boilerplate and I'm experiencing a strange thing. When doing an anchor and clicking it, it moves to the right. This it only happens on Firefox and not on Chrome, for example.
You can see an example of this with my exact CSS: http://jsfiddle.net/PuEzv/
How I can solve it?
Thank you in advance!
Its a bit late to answer, but still:
Remove or modify following code to avoid the "jumping" for all links:
#submenu a, a:active, a:visited {color:#f1f1f0; margin-left:1px; margin-right: 1px;}
To keep it enabled for #submenu, I think you muste write your css selectors like this:
#submenu a,#submenu a:active,#submenu a:visited {color:#f1f1f0; margin-left:1px; margin-right: 1px;}
I hope that helped!
here is the page : http://pfibco.ca/01-accueil-fra.php
I try to block hover highlight the menu... work almost fine
just the selected class dont apply... why ?
#menu ul li a .selected{
and the worst... the menu is completely destroy in ie6, why ?
i used the block propriety.. no choice for the hover...
display: block;
how to fix that ?
Try this for the selected problem:
#menu ul li.selected a {
The HTML has the selected class on the <li> so the CSS should match that.
I can't help you with IE6 though, it destroys a lot of things and my nerves are one of those things.
Answer for your IE 6 issues:
Each menu li tag seems having a style rule for line-height : 15.76pt, which is not found in other browsers. I guess IE6 incorrectly inherit the style from ancestor tag, maybe you can check you CSS file.
The border doesn't seem to work in each link, you can try to apply the border to its parent li tag instead of the anchor itself.
If you got hurry, you can use a litle hack for IE6 ( I'm got red now =X ).
/* hack for IE6 */
* html #menu ul li {
border: 1px solid #BFAF98;
border-top: none;
}
I think it's works fine.