Hi, Dimmy’s suggestion is good if it’s wayfinder problem.
However, the problem you are facing is really a CSS problem. What am I missing, you asked. and why the same menu works in the CSS play? Why it works in other site you did before but not this one? First of all, your CSS code (not just the flyouout.css) suffers fundamental issue in IE browsers.
A quick look at your html source code and the style2.css, first you have the "</style>" comes from no where in the <head>. That may not be the cause but with the combination of transitional doctype it might as well throw IEs into quirks mode thus creating unexpected problems. Also, I see bloody IE hacks in the "flyout.css" targeting for IEs. Put asides it’s a bad practice, but the fact that if your page is thrown to Quirks mode, it affects IE 6 and 7 and these hacks may not work as it should.
There is no logic and answers as to why IE behaves such and such in this layout, yet not other layout, because it’s a combination of elements you declared in your CSS. A ’position: relative’ or a missing width somewhere will throw IE into whacks. Translation? IE needs hasLayout.
I didn’t check your style2.css when I jumped right in to fix the problem in IE 6, and with these codes adding to ’flyout_ie.css", the problem
goes away immediately.
table {border-collapse:collapse; border:0; margin:0 0 0 42px; padding:0;position: relative;z-index: 500;}
.menu ul li {height: 100%;}
But it doesn’t work in IE 7 because the "flyout_ie.css", because it specifically targeting IE 6 and below by your command:
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="assets/css/flyout_ie.css" />
<![endif]-->
However the same rules work for IE 6 doesn’t work for IE 7, and I spent almost another 30 minutes tweaking the menu for this bloody browser, only to find out the problem is not so much with the descendents of .menu but a bigger problem with other CSS element.
First and foremost, it’s *the* best practice to declare ’width’ for floated elements. You are using ’.menu’ as left column, which is fine, but it’s not when you don’t add a width - IE doesn’t like it, period. Secondly, I always think it’s the *worst* to declare one column floated, and the other (second column) be decided by the browsers. In my early year of CSS learning, I went through lots of grief and frustrations because many CSS layout tutorials use this technique and I was misguided by these tutorials. This is what I am seeing with your 2 columns layout.
left column:
.menu {
z-index:1000;
font-size:90%;
float: left;
margin:0px ; /* this page only */
}
right column:
#content { padding: 30px 10px 10px 160px; border: 1px solid #484F3c; background: #CDCFC0; }
it actually amazes me that the declaration of your #container holds the page together and be centered
#container {margin: 3%; }
Back to your menu’s problem. CSSplay uses this :
.menu ul {
padding:10px;
margin:0;
list-style-type:none;
width:140px;
}
10% padding in the UL to gain spacings (gutters) is perfectly fine, but it doesn’t with your layout, because you use ’.menu’ as left column and no width, no float declared in the #content, the right (or second) column. When I started to fix the problem in IE, the right column’s content is being overlap with menu.
The better approach should be something like this:
.menu {
z-index:1000; /*remove z-index. it only works with absolute and relative position, you don’t need it here */
font-size:90%;
float: left;
width: 140px
margin:10px ;
}
#content { float: right; width: add-your-desire-value }
#container {width:total-value-is values of .menu + content }
and
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:140px;
}
I hope IE7 will behave normal like other browsers once you make these changes and that it doesn’t affect the added code I have for IE6, and I hope these are good pointers enough for you to fix other little problem it may occurs.
Now really must get back to my work.
