We've recently updated our site with some new navigational elements.
The nav is freaking out on IE8 and 9.
Here's the link: http://theunlimited.co.za/
I can see that the psuedo :hover element is on the li and know that IE prefers or requires it on the anchor tag.
Add This css Class
.submenu { top: 22px !important; }
Related
The first menu item on this site does not display correctly in IE but does so i Chrome. I use css text-indent to create an image menu item.
http://test.suntliv.nu/
In chrome you can see an icon of a house. In IE you see the letters "Sta".
EDIT: I fixed it by giving the first menu item a unique class name.
for IE try using first-child instead of first-of-type
.top-menu li:first-child {
text-indent: -1000px;
background-image: url('../image/icon_home.png');
padding-right: 0px;
}
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 %
how can i align the navigation text back on to the bar
This is what it should look like (and does in safari and google chrome)
this is what it looks like in firefox
Hey now define in your css #nav ul margin
As like this
#nav ul {
margin: 0;
margin-left:5px;
}
Set your #nav ul style to include margin: 0; before margin-left.
Browsers' default user agent stylesheets will add margins and padding, so make sure you use a CSS reset (like Eric Meyer's) to avoid these problems in future.
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.
When I have
<ul class="menu">
<li>link</li>
</ul>
how do I make the LI-tag change a property (e.g. list-style-image) when is hovered (a:hover)?
You can apply hover to the li as well:
ul.menu li:hover
{
list-style-image: url(highlight.gif);
}
Note (Thanks to Andy E): :hover is not supported in IE6, and supported for links only in IE7. (See compatibility table here). There is a workaround for IE6 and 7 named whatever:hover.
On modern browsers you can use li:hover but on older ones you would have to use javascript.
Edit: By the way, if you set:
a {
display:block;
}
you can do all the styling on the a and you don´t need to style the li.
You can give add directly into anchor element which is sub element of li element
li a:hover { ..style.. }
Or you can add a class for anchor to do that
li a.HoverClass:hover { ..style.. }
There is a basic example here