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;
}
Related
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; }
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'm not able to get CSS property "margin-top" to work consistently across all broswers (IE, FireFox, Chrome).
.navmenu { list-style: none; padding: 0px; margin-top:16px; }
This works fine in FireFox and Chrome, but does nothing in Internet Explorer.
An example can be seen here : http://www.pogocheats.net/template.php
Nav CSS can be found at : http://www.pogocheats.net/styles/test.css (starting at line : 276)
Is there an easy fix for this?
Rules for list-based menus:
1) Use a CSS reset
2) Don't style the LI, other than position: float: or display:
3) Put all styling on the A-tag and use display:block
4) Clear your floats (if using them)
See my list tutorial: preview.moveable.com/JM/ilovelists
This is driving me nuts. Here is some HTML and CSS that I have on a sample page. The first intent was to have LI without any markers. I have tried everything I could, but the list items will show up with standard decimal marker. I used developer tool that comes with IE9 to inspect UL and LI elements. It seems that IE does not recognize "recentAnnouncementsList" css class at all. These elements do not show the style applied on it. This whole set up works perfectly on Chrome. What am I missing?
Thanks
ul.recentAnnouncementsList
{
margin-left: 0px;
padding-left: 5px;
}
ul.recentAnnouncementsList li
{
margin-left: 0px;
padding-bottom: 5px;
list-style-type:none;
}
ul.recentAnnouncementsList li a{
color:#675DF0;text-decoration:none; font-size:0.85em;
}
ul.recentAnnouncementsList li span{
display: block;
text-indent: 0px;
text-transform: none;
}
<td>
<div>
<ul class="recentAnnouncementsList" id="recentAnnouncements">
<li>Released 1</li>
<li>Release 2</li>
</ul>
</div>
</td>
Finally I have solved this problem.
The problem was that I had added a new CSS class named "container" in the file. I am not sure if this is some bug in IE and FF, but CSS file was getting clipped at start of that style. I found this out by looking in the developer tools for IE. When i looked at loaded file in IE, it was not complete. All my styles related to my UL/LI tags were present after that class definition. After I deleted "container" class from file, everything went back to normal.
Thanks for all your input and suggestions.
for my project I once rendered IE9 as IE8 by rendering it with meta tag of html
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
so the same css worked for both
IE 6-9 all have limit on the number of selectors declared in a CSS file. I assume that styles declared for .recentAnnouncementsList are located above the limit and completely ignored. There are tools are resources which help to split big CSS files into several parts and keep the number of selectors in a single file below the limit:
blesscss - command line tool
css_splitter - for Rails apps
gulp-bless - for NodeJS projects
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.