I have a CSS dropdown menu which is working great in IE7, FF, Safari, and Opera (on PC, haven't been able to test on Mac yet).
Unfortunately in IE6 - which my clients on this project are all using, urgh - the menu stretches too wide and covers the site logo. Also, none of the dropdowns work.
To some extent I could live with the dropdowns not working in IE6, but I can't have the menu covering the logo.
http://preview.sgwl.net/
The site uses a modified version of http://wordpress.org/extend/plugins/wordpress-css-drop-down-menu/. I had to modify it to make the top level items not fixed-width, which is probably what's screwing up IE6. I've tried using _width:1px; _overflow:hidden; and an array of other IE6 hacks but nothing has worked.
It took a bit of doing to get the menu working in the browsers where it's working now, so answers that rely on IE6-specific styles rather than recoding from the top down would be fantaaastic! THANK YOU!!
On line 276 in custom.css you have
/* a hack so that IE5.5 faulty box model is corrected */
* html .custom .menu a, * html .custom .menu a:visited {
width:149px;
w\idth:138px;
}
html will also affect IE6. If you remove that whole section of code, the menu will format correctly in IE6.
Related
I am trying to resolve an issue with an image slider in IE9.
Please see http://betelec2.placeneuve.com/index.html
The same page is rendered using php at http://betelec2.placeneuve.com/index.php and it works fine, but the load time is slow, so the home page has been "recreated" using static content with the .html file extension.
The site is htpassword protected and the username and password are placeneuve and patali123 respectively.
The issue I am having is that in IE9, the slider is disregarding the list styles. It is displaying the images stacked one above the other (rather than in a row with overflow hidden) and it is using default unordered list styles (with bullets). Furthermore, it is ignoring the positioning of the text overlay. Finally, it is doing the same thing to the image thumbnails that appear below the slider.
If you look at the site in Chrome, FF or Safari, it works without a glitch.
IE9's developer tools are not very useful, at least for me, and I am a bit lost as to how to resolve this.
Unfortunately, I received this site from someone else who had concatenated and minified the CSS and didn't provide the original CSS, so finding the selectors is pain as well. However, the relevant CSS selectors start with .rg-ss-
Anyone able to assist would be most appreciated.
Use following:
.fatfooter2 ul li {
list-style: none outside none;
margin-bottom: 0;
display: inline; /* display inline should put your list items in line *\
}
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.
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".