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".
Related
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
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).
Imagine I'm having a DIV. I want to display it in a row with other divs, so I'm giving it display: inline-block along with other style definitions in a CSS sheet.
Now Internet Explorer wants to have display: inline; for the behavior I want.
How do I give Internet Explorer a seperate styling command to overwrite the definition for good browsers, so only IE will have display: inline;. Due to technical limitations I cannot use <![If IE] -->-stuff in HTML, I need to stay within the CSS file.
You can use selectors like so:
\9 – IE8 and below, * – IE7 and below, _ – IE6
So in your case:
*display: inline;
You can simply add this to the rest of the css:
div{
display: inline-block;
// some;
// other;
// css;
*display: inline;
}
Read my blog post on this.
Update
IE version 5 till 8. (They are all
affected) – Cobra_Fast 1 min ago
So in this case, you'd use
div{display\9:inline;}
A horrible way to do it is: http://www.webdevout.net/css-hacks
Even though you cannot change the HTML I'd read up on http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
IE actually has quite good support for inline-block - if the element is originally an inline element. So try using a span instead of the div.
To make inline-block work on block-level elements in IE7, I frequently add this to my answers:
Overlapping inline div
One list, simple float left, different cell sizes
How do I center a list as shown here?
multi-line tabs
Remove margin between rows of overflowing inline elements
How can I wrap content around a UL CSS Menu so content is seamless?
I sure hope what I'm suggesting everywhere actually works :D
See: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
selector {
display: inline-block;
*display: inline;
zoom: 1;
}
basically im in a little dilemma... As usual, IE6 is messing up some tiny line of CSS.
All i need to fix everything is:
overflow:hidden;
Thats it. But, heres the problem. This is for a uni assigned piece of coursework and they say only 1 css file which must be valid. And no conditional comments :S so there goes my plan. Is there any way to target IE6 ONLY (not 7+ etc.) and still maintain a valid CSS file?
PS: before any of you say, well you should rethink your CSS etc, I have, its for a CSS dropdown menu and a nested element is stretching my link container so i need overflow set to hidden. Only IE6 needs this :S
EDIT MY SOLUTION:
html>body .allbrowsersceptIE6 {
overflow:visible;
}
.onlyIE6 {
overflow:hidden;
}
It works because all other browsers use the first value and ignore the second one unless the second has !important on it :D
If it comes down to using hacks as your only option: http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml
So, you want to apply that rule to #menu or whatever:
* html #menu { overflow: hidden; }