Forum Moderators: not2easy
After some tweaking, I seem to have been able to get it to work (sort of) in Opera (although there are funky display issues where sometimes the bottom child item in the list gets "cut off" or once you mouse off the main menu item, part of the submenu stays on the screen), but not in IEor Netscape (they don't recognize display: block; ) The issues seem to be with setting the width using padding rather then ems or whathaveyou, and with something else I haven't yet identified, or identified and forgot.
Here is the CSS/HTML that :almost: works:
<script language="JavaScript" type="text/JavaScript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//-->
</script>
<style type="text/css">
<!--
.menu {
position: absolute;
font-weight: bolder;
font-size: 10px;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 100%;
z-index: 10;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.menu li {
margin: 0;
padding: 3px 17px 3px 17px;
float: left;
background: #C00 none;
text-align: center;
border-right: 3px solid #FFF;
position: relative;
}
.menu a {
text-decoration: none;
color: #FFF;
}
.menu a:hover {
color: #9C6;
}
#endmenu {
border-right-style: none;
}
li:hover ul, li.over ul {
display: block;
}
li ul {
display: none;
position: absolute;
top: 18px;
left: 0;
}
.subnav li {
background: #ffc none;
text-align: left;
color: #c90;
width: 5em;
padding: auto;
}
.subnav li a {
color: #c90;
}
-->
</style>
</head>
<body>
<div class="menu">
<ul id="nav">
<li><a href="money.htm">Money</a></li>
<li><a href="debt.htm">Debt</a></li>
<li><a href="wealth.htm">Wealth</a></li>
<li><a href="about.htm">About</a>
<ul class="subnav">
<li><a href="books.htm">Books</a></li>
<li><a href="bio.htm">Bio</a></li>
<li><a href="press.htm">Press</a></li>
</ul>
</li>
<li id="endmenu"><a href="contact.htm">Contact</a></li>
</ul>
<br clear="left">
</div>
This whole thing sits in another div, but for argument's sake let's assume it doesn't affect it. Any help here, folks? I'm at my wits end, and to be perfectly honest, I let this sit for a couple of days to mull over in my mind, and I can't for the life of me get it to work - now I can't even remember what I've tried and what I haven't!
Oh, BTW, I had all of the menu stuff ID'd, but none of the browsers liked that, so I classed them. And Netscape 7.1 increases the width of the main menu item when it's moused over. My homepage in my profile is actually the page I am working on, and the main index page at that IP has the basic menu without the dropdown.
Esme
there's a lot of things in here.. I landed up rewriting the code so much I don't know which bits to explain.. ;)
what I did first was use a different method of clearing, this corrected the display issues in opera and also highlighted that collapsing margins were then starting to affect the placement of the next div, so maybe that will help clear up something else. without knowing what's following the menu, I don't know if this is an issue.. but it needs something that is cleared at both sides and possibly in IE's case may need a layout hack. I've used a fictitious content div (#content) to highlight collapsing margin difference in Moz /* remove the border to see the difference */ but you may not need that extra workaround.
I found it easier to convert to pixels for width so I could use width/height to overcome IE's display/layout issues, if you don't want that then there would probably be a need to provide more IE Layout/hiding hacks e.g. to force IE to honour display block on the links.. then because of this I had to provide a box model hack for IE5.x (you might need to change it to an all IE if you're working in IE6 Quirks.. the following code is based on using IE in Strict mode)
IE5.x has a weird issue where it needs the li elements in the vertical dropdowns to be display: inline, instead of block in order for it to work properly so there is a simplified tan hack incorporated for it..
there were also "whitespace in lists" issues - so I provided a height fo the <li> element again an IE layout hack would be required here if pixel heights are too restrictive..
I also added borders to the start and finish of the horizontal ul, this was artistic licence .. Ok it was laziness to avoid scripting extra #id's classes.. but again you can put it back the way you want..
commented code:
<style type="text/css" media="screen">
body {background: #ccc;}
.menu {
position: relative; /* I changed this from absolute.. but it may be you already have this inside a relative div.. in which case change it back */
font-weight: bolder;
font-size: 10px;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 100%;
z-index: 10;
border-left: 3px solid #fff; /* added this to match borders on li's */
}.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}.menu li {
margin: 0;
padding: 0;
height: 18px;
line-height: 18px;
float: left;
background: #C00;
border-right: 3px solid #FFF;
position: relative;
}.menu ul a {
display: block;
width: 70px; /* this makes IE recognise display: block */
text-decoration: none;
color: #fff;
}.menu ul a:hover {
color: #9C6;
}/********* dropdown lists here targeted by specificity instead of using subnav class */
.menu ul ul {
position: absolute;
top: 18px;
left: -3px; /* to line up borders */
width: 70px;
display: none;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
}.menu ul li:hover ul, .menu ul li.over ul {
display: block;
}.menu ul ul li {
border: 0px;
background: #ffc;
text-align: left;
color: #c90;
margin: 0;
padding: 0;
height: 18px; /* to help IE's display issues otherwise layout hack will be needed */
line-height: 18px; /* used this instead of padding to vertically center text */
float: none; /* required to override the float on the li earlier in the cascade */
}/* hide from mac \*/
* html .menu ul ul li
{
display: inline; /* gives value to all versions of IE/win */
d\isplay: block; /* gives correct value back to IE6/Win only */width: 70px; /* for all versions if IE/win */
w\idth: 67px; /* gives correct value back to IE6/Win - only required if page is in strict mode */
}
/* end hide */.menu ul ul a {
color: #c90;
display: block;
padding-left: 3px;
width: 67px; /* either this or a layout hack is required here */
}/* my "clearer" - clearer needs to be after the relative div so if your .menu is absolutely positioned inside a relative div then it's the relative div that's needs clearing..I think anyway */
#content {
clear: both;
border-top: 1px solid #000; /* make same as background color - it stops collapsing margins in moz */
}p {background: #fcf;}
</style>
</head>
<body>
<div class="menu">
<ul id="nav">
<li><a href="money.htm">Money</a></li>
<li><a href="debt.htm">Debt</a>
<ul>
<li><a href="books.htm">Books</a></li>
<li><a href="bio.htm">Bio</a></li>
<li><a href="press.htm">Press</a></li>
</ul>
</li>
<li><a href="wealth.htm">Wealth</a></li>
<li><a href="about.htm">About</a>
<ul>
<li><a href="books.htm">Books</a></li>
<li><a href="bio.htm">Bio</a></li>
<li><a href="press.htm">Press</a></li>
</ul>
</li>
<li><a href="contact.htm">Contact</a></li>
</ul>
</div>
<div id="content">
<p>start page text...</p>
<p>start page text...</p>
</div>
Full code is here in case I changed bits that I haven't explained.. hehe like you I tried some things and then forgot what I'd done ooops..
Suzy
As for position:absolute for the menu, yep, had it that way for design reasons. And the reason I was using padding as opposed to width:70px as you had is to have the inline elements adjust their width based on their content - I suppose if it's the only way to do it, I'm stuck with a static width. I think I actually got it working in "My Three Browsers" with a static width.
The borders I think I can work with :) If you noticed, I cleared the right border on the last element b/c I wanted the white line just inbetween, not following. And the (almost) finished product is available at the index page of the IP in my homepage.
Anyhooo - -any idea why IE is bailing? If it's something quick, that would be great, 'cuz I would spend days to get it to dance like you have - man, I HATE all of these hacks! and thanks for providing the "hide from Mac" - I'm not familiar with any Mac issues and don't have a Mac to test on.
Esme
have you included the javascript for IE?
I just didn't repost it my code as it's fine, it's required for IE to make the hovers work ..
I had it working perfectly in all version of IE
PS: floats should always have widths for backwards compatibility.. but you can remove the static widths if you want and use padding .. you will then need some more hacks for IE because those widths are actually preventing some more yukky IE display errors :o
Suzy
Found it a good idea to wrap the menu in a div. Helps with placement. Set this div to a high z to stop the menu items from disappearing behind content. Have only tested this menu with IE 6 and fireworks. Seems to work fine. HTH
Jackson - Thanks! I'll check out the extension. In the actual page, the menu div is wrapped in a "header" div, and you can see that the Z index is 10, which is plenty to "unhide" the dropdown (which I did run into, BTW).
Mincklerstraat - At one point, I did use
<a href="">Bogus Link</a>, and I *think* it worked - I did so much to this page to try to make it work, I don't remember what I did when, and what worked and didn't - LOL
However, I am heading off to sunny California to take a break from all of this insanity, and feel good that I took the page from a whopping 342K to 74K (large size is due to rotating graphic on home page) - from 10K for the html to 5K (and that's with the CSS in the head, so even less once I make the stylesheet external). I'll be back next week and will continue work on it then, so don't be surprised to find another post by yours truly.
And how much did I charge the client? Well, the CSS redesign was supposed to be part of Phase II, but I couldn't stand the horrendous tables that the previous designer used - danced all over the screen when going from page to page, horribly bloated code, horizontal scrolling. So, nada - however, it IS going to be worked into various other projects I do for the site.
Thanks for all of the help and suggestions!
Esme
