http://www.streetstyles4all.co.uk/test4.html
Can anyone please advise. I have finished my menu now and it works in most browsers apart from IE9. The menu itself works but the drop down doesn't. The GENERAL and SHOP menu items should drop down and reveal many other sub menu items. Just not in IE9 :-(
Can anyone help?
The page in question is http://www.streetstyles4all.co.uk/test4.html
If you remove the filter property from the following rules:
#menu
#menu li:hover
then the display is fixed for IE9.
https://stackoverflow.com/a/6901105/637889 explains that you should probably be using -ms-filter for IE8+ (although clearly filter is still supported in IE9 as the gradient is working). Also see http://blogs.msdn.com/b/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx for the newer syntax (as property values need quoting).
As an alternative you may want to explore the answers on IE9 Gradient using -ms for a more cross browser gradient solution, if you have not already seen it.
Lastly, may I also recommend Paul Irish's approach using Conditional Comments to including CSS rules for problematic (i.e. IE) browsers without cluttering the less problematic browsers.
i remove in your css stylesheet z-index two think
1. #menu li:hover (Remove z-index this )
2. #menu (remove z-index this )
#menu li:hover {
z-index: 5;}
#menu {
z-index: 11;
}
and now check to Your layout in IE
Related
I'm trying to have our Wordpress blog display a little better in IE8 and below (it works great in IE9, Firefox & Chrome). A big issue seems to be IE8's lack of support for negative margins, so the gap which we have between the posts column and the side widgets is non-existent in IE8.
URL: http://trekcore.com/blog
The CSS controlling that separation is here:
#secondary {
float:right;
width:300px;
margin-right:-320px;
}
Any help on suggestions for conditional CSS to fix this in IE8 and under would be most appreciated!
you should validate your html markups, 35 Errors and 11 warnings wont help.
in the meanwhile, try this fix :
.negative-margin-element {
zoom: 1; /* ie hax*/
position: relative; /* ie forced behavious*/
}
You are using HTML5 elements and IE8 does not understand them and will ignore them and you can't apply CSS to them because IE8 won't know they exist. To fix IE, you need to add the html5shiv. This will add those elements to IE8's DOM tree and set them to block level.
You can write your own code and CSS to do the same thing but the shiv is convenient.
After designing and coding a standards-compliant website, that works functionally in normal browsers (Firefox, Chrome, etc), I now need to make it look identical (or mostly so) in Internet Explorer, down to Internet Explorer 6.
The current version of the website can be found at http://www.adwas.org/test/redesign/, with a minimal version of the problem at http://jsfiddle.net/FdS6L/
The problem I'm having is that at and below the area with the logo, it absolutely breaks down in IE6 (and 7, I'm guessing, still). I've already attempted to fix some of the issues, using the star-hack selector, though it still looks heavily borked. My question is: how do I maintain the size of the header, and get the elements to be (somewhat, if not totally) visible, similar to how it looks in most browsers?
Note:
I'm not adverse to adding JavaScript for the layout to work as necessary in IE6. (applies mostly to the submenu navigation)
I was trying to work on your site, and got it to this point: http://jsfiddle.net/3m367/3/. I basically cleaned up some code and restructured the header, where the bars are full-width automatically rather than forcefully (overflow-x is a CSS3 property, so wouldn't work for older browsers). This displays fine in IE7 and up. However, I stumbled upon an issue with your navigation - IE6 supports :hover pseudo-class on a elements only, so selectors like li:hover wouldn't work. Yet, you cannot put your submenus inside parent menu item's a element because you cannot have links within links. I'm not sure if it's possible to do that drop-down menu in IE6 without using JavaScript. Other than that, the navigation seems to be the only thing messing up in IE6 right now.
Instead of using float: left on #sitenav li you could try:
#sitenav {
display: table;
}
#sitenav ul {
display: table-row;
}
#sitenav li {
display: table-cell;
}
You should also consider using conditional comments to hide a set of IE-only stylesheets from other browsers, especially a stylesheet targeting something as old and archane as IE6. If you don't get anything to work with bare CSS and conditional comments, you should consider trying HTML5 Shiv and do the markup with HTML5 (which I believe you should either way).
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".
I have a ul/li based side menu, styled with two CSS rules, the following of them is ignored by IE8 Quirks mode, and I assume IE6:
ul { padding-left: 15px; }
I can reproduce the problem in FF by removing this rule completely. I have also tried using jQuery to apply the rule, with no change in IE8:
$("ul.menu-class").find("ul").css("padding-left", 15);
Is this a box model issue, and, how can I reduce the UL 'padding' in IE Quirks Mode?
Try margin-left for IE - browsers have a unique look on that matter.