I have a classic UL multilevel menu that works flawlessly in Firefox.
The LI are float: left, and the A inside is width: 100% and display: block but as you can see from the screenshots below the submenu items (Hello, World and Foobar) display inline.
The weird thing is that this affects the menu even when using canned solutions such as Suckerfish.
What do you suggest i look into to solve the problem?
Do you mean to do a clear:left; on the LIs? It would help seeing the HTML.
Had an error in the CSS file that prevented IE from parsing it correctly! Always validate your CSS!
Related
I have a menu working in all major browsers except IE7 and IE8. Here is the working menu:
http://jsfiddle.net/DtxWt/
However, In IE7 and IE8, it will display as shown here:
http://imgur.com/gcByA
Any help would be appreciated. Thanks!
nav is an HTML5 element and IE7 & 8 do not understand HTML5. I believe IE is interpreting your HTML as <nav></nav><ul><li>... Therefore, your CSS is not being applied. You'll want to look into using something like http://code.google.com/p/html5shim/ for filling in the missing functionality.
display: inline-block with ul is not necessary from what i see, let it at block
and probably add a <div class="clearer"></div> defined in css: .clearer: clear:left;
you may also use a div #nav instead of nav
http://philliesnation.com/
I am currently debugging this site for Internet Explorer and am running into two issues:
In IE7/8/9 at the bottom of each post there is a "Filed Under:" section that has a ul set at 200px wide. But for some reason in IE it is being shrunk down to 50px by adding an inline style to each li item. Therefor, the section shows up vertical instead of horizontal. In FF/Ch/Saf it looks fine.
In IE7 the main navigation is not properly working. If you scroll over nav points you get a dropdown with more information, but on on three tabs: News/Features/Multimedia these dropdowns dont work at all.
I did not build this site but am helping to debug it and have been trying for numerous hours on end to figure out why these bugs occur. Any help is much appreciated.
To fix your first issue: In your func.js you have the following line:
if( $.browser.msie ) {
$('.post-links ul li').css({ 'width' : '50px' });
};
Thats whats messing up the width of your "File Under.." section in IE. Remove that and all is well (i see no reason why to keep it).
For your second issue: I can't quite diagnose the problem because your site keeps freezing my IE browser (it's so heavy!!) but from what i can tell your nav script is not firing in IE correctly, so you're going to have to force it with some conditional comments in the header of your document, like so:
<!--[if lt IE 9]>
#navigation li:hover .dd-menu {
display: block;
}
<![endif]-->
I am working on a webiste http://www.kerin.net/who.cfm but its top menu is not format well in IE7.0 but it well in all ather browser .
Can anybody please suggest me some ways to rectify this problem.
First you have a table based layout. No wonder if any one will even try to help you. Table based layout is a big "NO NO" in modern web development. Not that I am against it.
To fix the issues, do as follows.
div.menu
{
width: 50px; /*you can have any width you like here */
}
It is not clear from you question that how are you testing in IE7. I tested it using the IE7 mode in IE9 from the web development toolbar and fixes the issue. The broken layout of the top menu is fixed and they sit along each other, same as in IE9 on windows 7.
If you are going to ask any further question as to why it is so or if it is a bug, I honestly dont't know. Your code is so messed up, it will take quite some time to dig in there. The same results can be achived using simpler markup. nav element in HTML5 and div element with nested ul and li elements in HTML/XHTML lower than 5. You current code goes like
div.sidemenu1 > div.menu > ul > li > div.nav-text > ................ and so on
A bloody management nightmare. You really should try to simplify your markup.
I'm working on a site for a client, and everything is working perfectly under IE8+ and everything else (both Windows and Mac).
http://www.cirkut.net/wp/libertyguide/
If you head there in something other than IE6 and IE7, you'll see that you can hover over any part of the menu to activate the menu/hit the button. This is needed to be able to access the dropdown menus in IE6 and IE7.
If this was just in IE6, I wouldn't care as much, but with IE7 being a tiny bit more compliant and more dominant in the market, I need this to work, and if a fix works for both, great, if not, then IE7 will be fine as a fix.
Details:
Running Wordpress 3.1.3
Started with Starkers theme (edited from there out)
Using Wordpress Menus, so no unusual
Using IE8.js (http://code.google.com/p/ie7-js/), but only fixes some IE6 menu issues (horizontal menu broken in IE6 without this JS)
Other Information:
I've tried adding top and bottom padding to the links, but it won't do anything for the actual selection box model (hence why I now have no top and bottom padding).
I'm wondering if I have my dropdown menu set up weirdly or incorrectly.
EDIT (more information):
The problem is that if you check in chrome or similar, the main horizontal menu is working properly. You don't have to hover on the text to allow the link to be clickable. However, in IE6 and IE7, this is not the same. In IE6 and IE7, you have to hover over the actual text in order to make the dropdown menu to appear.
Anyways, if anybody could provide some insight, it would be much appreciated.
Thanks!
If you use developer tools in IE then you will see that there are 2 sets of styles....
#nav_wrap ul.menu > li a and #nav_wrap ul.menu > li > a
This is what I did to resolve the issue:
- If I uncheck/remove all the styles in #nav_wrap ul.menu > li > a
- Remove position:relative and height:40px from #nav_wrap ul.menu > li a
I am not sure if you need those classes but doing the above makes the entire block clickable as opposed to just the text in IE7. I havent tested in IE6.
#nav_wrap ul.sub-menu li:hover > .sub-menu
Not sure if IE6 and IE7 are able to support the direct child selector >. Probably that's the cause.
Try like this
#nav_wrap ul.sub-menu li:hover .sub-menu
I am new to CSS and have coded my first site with CSS. I will admit to not fully understanding CSS yet but would like to learn. I have heard about special XHTML & CSS coding being needed for older IE browsers but really don't know what CSS code is causing the trouble.
The website is here. The problem is with the top and bottom navigation menus on all pages except Blog and Moodle (I haven't updated those yet). Can someone help me with what needs to be isolated for IE?
Thanks so much!
You need to do three things.
use a strict doctype at the top of your page. at the moment you have transitional. a strict doctype ensures that IE conforms to CSS standards the best it can.
Add the following bit of CSS for your top navigation list items
#topnavcontainer ul li { display:inline; }
Add the following bit of CSS for your bottom navigation list items
#bottomnavcontainer ul li { display:inline; }
Another solution (that should work regardless of doctype);
#topnavcontainer li {
display:inline-block;
zoom: 1;
*display: inline;
}
The short explanation is that inline-block allow you to style the list-items as if they were block level elements (ie, give them width, height, etc) while still laying them out inline. An advantage over float: left is that you can apply text-align to #topnavcontainer to align your navigation left/center/right. You can also set vertical alignment although that seems to be a bit finicky at times.
The other two lines, zoom and *display are a trick to make this work in older versions of IE. It's a long explanation but if you want to know more about it, search Google for "hasLayout" and "css star hack".