Thu, 2008-09-25 20:42
I have a variety of page types trying to hold the same css horizontal drop down menu. Thank you so much for help along the way.
Now for our cgi-forum. Please advise:
Looks "ok" in Firefox here but will not work in ie except on an independent page but not within our cgi based forum. It initially loads to the left then centers with mouse over, but does not drop down.
Got the Doctype working however, that was what I though was the problem.
Here is the css as it has been working in Firefox:
/* Begin CSS Drop Down Menu */ #menuh-container { display:block; margin:0 0 0 0; text-align:center; position: relative; top: 0em; background: url(ocean3.jpg); /* commented out as does not seem to be needed */ /*left: 1em; */ } #menuh { font-size: 10px; font-weight: bold; font-family: verdana, arial, helvetica, sans-serif; width:75em; margin-left:auto; /*centers in Fire Fox - thanks downtap of csscreater.com */ margin-right:auto; /*centers in Fire Fox - thanks downtap of csscreater.com */ } #menuh a { text-align: center; display:block; border: 1px solid #0099CC; white-space:nowrap; margin:0 0 0 0; padding: 0.3em; } #menuh a:link, #menuh a:visited, #menuh a:active /* menu at rest */ { color: #ffffff; background: url(bluetilebcklite.jpg); text-decoration:none; } #menuh a:hover /* menu at mouse-over */ { color: #ffffff; background: url(bluetilebck.jpg); text-decoration:none; } #menuh a.top_parent, #menuh a.top_parent:hover /* attaches down-arrow to all top-parents */ { font-size:12px; background-position: right center; background-repeat: no-repeat; } #menuh a.parent, #menuh a.parent:hover /* attaches side-arrow to all parents */ { background-position: right center; background-repeat: no-repeat; } #menuh ul { list-style:none; margin: 0 0 0 0; padding:0; float:left; /* this keeps the cells horizontal as apposed to a vertical list */ width:12.5em; /* width of all menu boxes */ } #menuh li { position:relative; min-height: 1px; /* Sophie Dennis contribution for IE7 */ vertical-align: bottom; /* Sophie Dennis contribution for IE7 */ } #menuh ul ul { position:absolute; z-index:500; top:auto; /* centers child under parent - thanks downtap of csscreater.com */ left:0; /* centers child under parent - thanks downtap of csscreater.com */ display:none; padding: 1em; margin:-1em 0 0 -1em; } #menuh ul ul ul { top:0; left:100%; } div#menuh li:hover { cursor:pointer; z-index:100; } div#menuh li:hover ul ul, div#menuh li li:hover ul ul, div#menuh li li li:hover ul ul, div#menuh li li li li:hover ul ul {display:none;} div#menuh li:hover ul, div#menuh li li:hover ul, div#menuh li li li:hover ul, div#menuh li li li li:hover ul {display:block;} /* End CSS Drop Down Menu */
Fri, 2008-09-26 21:00
#1
maybe relative
I was looking at your page with IE Developer Toolbar, something I HIGHLY recommend everyone who makes websites getting. While I was looking at it I noticed that your div that contains your menu (your unordered list menu) seems to be in the right space and it isn't until you hover over the UL that it shoots over to the right.
Maybe try adding a relative position to that div container.
#menuh { position: relative; font-size: 10px; font-weight: bold; font-family: verdana, arial, helvetica, sans-serif; width:75em; margin-left:auto; /*centers in Fire Fox - thanks downtap of csscreater.com */ margin-right:auto; /*centers in Fire Fox - thanks downtap of csscreater.com */ }
Not sure if that will help but it is what I saw at a quick glance.
Sat, 2008-09-27 16:35
#2
Excellent
Thank you...I thought it might be that easy but applying the same logic changed the wrong div.
So that solved the centering and disapperaing when scrolled. It still does not drop down, however in IE.
I've decided to upgrade this forum after all...sort of the last straw with an old faithful program. The menu works perfectly in the upgrade. At least having this centered will tide me over until I can get it up and running.
Thanks .....this forum is very helpful and responsive. So many tech forums are not monitored very well. It has made us better moderators of our own forum.