|
CSS - Div In Table In Ie Css Flyout Menu
the following code works in opera and i think mozilla, but in ie only the top menu flies-out. the other two (a div in a table, and a table in a div) don't work. Any idea how to amend the css so they do work. I have tried setting the z-index to various things, so i dont think that's it.
...waiting to fly Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
--><HTML>
<HEAD>
<TITLE> New Document </TITLE>
<link rel="stylesheet" media="all" type="text/css" href="css/flyout2.css" />
<!--[if lte IE 6]>
<style>
.nav-head ul li a.hide, .nav-head ul li a:visited.hide {display:none;}
.nav-head ul li a:hover ul li a.hide {display:none;}
.nav-head ul li a:hover {color:#fcf; background:#36f;}
.nav-head ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;z-index:99;overflow:visible;}
.nav-head ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.nav-head ul li a:hover ul li a {display:fixed; background:#22e; color:#000;}
.nav-head ul li a:hover ul li a ul {visibility:hidden;}
.nav-head ul li a:hover ul li a:hover {background:#cc0; color:#0a0;}
.nav-head ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#955;}
</style>
<![endif]-->
</HEAD>
<BODY>
From code at <A HREF="http://www.cssplay.co.uk/menus/flyoutt.html">this site</A><BR>
<div class="nav-head">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>
<!-- end 1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1 -->
<TABLE width='30%' bgcolor='red'>
<TR>
<TD>
<div class="nav-head">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>
</TD>
</TR>
</TABLE>
<!-- end 2 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1 -->
<div class="nav-head">
<TABLE bgcolor='yellow' width='250%' height='250%'>
<TR>
<TD>
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</TD>
</TR>
</TABLE>
</div>
</BODY>
</HTML>
Similar TutorialsHi there, I'm working my way through html, css and web design at the moment, and looking at drop down menus. Currently I'm looking at css only menus, I haven't delved into javascript yet. So I I've got a few questions regarding what I've currently got: html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello</title> <link type="text/css" rel="stylesheet" media="screen" href="default.css" /> </head> <body> <div id="navbar"> <ul> <li><a href="#">Main Page</a></li> <li><a href="#">About</a></li> <li><a class="dropmenu"><a href="#">Tutorials</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Dreamweaver</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </a></li> <li><a class="dropmenu"><a href="#">Articles</a> <ul> <li><a href="#">3 column magic</a></li> <li><a href="#">Site layouts</a></li> <li><a href="#">Creating Navbars</a></li> </ul> </a></li> <li><a href="#">Links</a></li> </ul> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> css Code: Original - css Code @charset "utf-8"; /* CSS Document */ #navbar ul { padding: 0; margin: 0; list-style: none; background-color: #3F9; width: 120px; } #navbar li { position: relative; } #navbar li li { position: static; } #navbar ul ul { background-color: #7B5; top: 0; left: 120px; display: none; position: absolute; } #navbar a { text-decoration: none; text-align: center; display: block; padding: 5px 10px; } #navbar a.dropmenu { padding: 0; margin: 0; border: none; display: block; } #navbar li:hover ul, #navbar a.dropmenu:hover ul { display: block; } #navbar a:hover, #navbar li:hover { color: #000; background-color: #3CF; } #navbar li:hover li:hover { background-color: #F04; } @charset "utf-8"; So its currently a vertical flyout menu, I'll be looking at horizontal drop down ones soon. Regarding the last css rule, I was just experimenting with presentation and was wondering if I could make the second level of menus have a different hover background colour than that of the initial menu. Is it just something I've got wrong with the selector (#navbar li:hover li:hover)? The 2nd, more puzzling thing, is that you can see in the first menu, only the text comes up as a hyperlink (or clickable). In the second level menus, the whole area of the li (being an a element displayed in block mode) is clickable. I am pretty sure this is a result of setting the position property of the the li elements to relative. I have set the li elements to static (default) in the second menu, and as noted, they work fine (or more desirably). Why does changing the position property of the li to relative suddenly stop it from being clickable? The relative positioning is needed to correctly position the second level uls (menus), unless there is another way to do that. BTW Currently looking at it with ie7 at the moment. What's going on here? Lastly, I was hoping my a.dropmenu elements would let ie6 display the menu; sadly this doesn't seem to be happening. Again, any ideas what's gone wrong? Hello, everyone. I'm a relative newcomer to CSS, and I decided I'd try and add a neat flyout menu to the new site I'm developing: www.mindwallpictures.com. As you'll notice, it works great in Firefox, but doesn't work at all in IE. Here is the CSS code from my site: Code:
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at (URL address blocked: See forum rules)
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menu {
height:150px;
font-size:90%;
/* this page only */
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
position:relative;
z-index:500;
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* style the list items */
.menu li {
background:#6b6b6b url(images/button.gif);
height:26px;
/* for IE7 */
float:left;
}
.menu li.sub {background:#6b6b6b url no-repeat right center;}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
/* style the links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#FFF;
text-indent:5px;
border:1px solid #6b6b6b;
border-width:1px 1px 1px 1px;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px;}
/* style the link hover */
* html .menu a:hover {color:#adbaad; background:#888d88; position:relative;}
.menu li:hover {position:relative;}
/* For accessibility of the top level menu when tabbing */
.menu a:active, .menu a:focus {color:#adbaad; background:#888d88;}
/* retain the hover colors for each sublevel IE7 and Firefox etc */
.menu li:hover > a {color:#adbaad; background:#888d88;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu li ul {
visibility:hidden;
position:absolute;
top:-30px;
/* set up the overlap (minus the overrun) */
left:100px;
/* set up the overrun area */
padding:30px;
/* this is for IE to make it interpret the overrrun padding */
background:transparent url(transparent.gif);
}
/* for browsers that understand this is all you need for the flyouts */
.menu li:hover > ul {visibility:visible;}
/* make the second level visible when hover on first level link */
.menu ul a:hover ul {
visibility:visible;
}
</style>
and here is the html that goes with it: Code:
<div class="menu">
<ul>
<li><a href="index.html">MindWall Home</a></li>
<li class="sub"><a href="#nogo">News</a>
<ul>
<li><a href="news/recent/index.html">Recent News</a></li>
<li><a href="news/archives/index.html">News Archives</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">Films</a>
<ul>
<li><a href="films/rendezvous/index.html"><i>A Dreamer's Rendezvous</i></a></li>
<li><a href="films/millberg/index.html"><i>Millberg Apartments</i></a></li>
<li><a href="films/musicvids/index.html">Music Videos</a></li>
<li><a href="films/upcoming/index.html">Upcoming Projects</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">Links</a>
<ul>
<li><a href="http://www.mooseheadfilms.com">Moosehead Studios</a></li>
<li class="sub"><a href="#nogo">Purdue</a>
<ul>
<li><a href="http://www.purdue.edu">University Home Page</a></li>
<li><a href="http://www.cla.purdue.edu/film-studies/">Film Studies Program</a></li>
<li><a href="http://purduefvsnewsletter.blogspot.com/">FVS Newsletter</a></li>
</ul>
</li>
<li><a href="http://www.imdb.com">Internet Movie Database</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">About Us</a>
<ul>
<li><a href="about/mindwall/index.html">About MindWall Pictures</a></li>
<li><a href="about/awards/index.html">Awards & Recognition</a></li>
<li><a href="about/crewbio/index.html">Crew Biography</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">Contact Us</a>
<ul>
<li><a href="contact/mindwall/index.html">Contact MindWall</a></li>
<li><a href="contact/crew/index.html">Contact film crew</a></li>
</ul>
</li>
</ul>
</div>
It has been altered (by myself, the n00b) from the original code found at CSSplay: http://www.cssplay.co.uk/menus/flyout_4level.html It's bugging the crap out of me, and the guy wants the site done as early as next week. This is the one thing holding me back, since people...actually...use IE. -_- Poor souls. Any help would be greatly appreciated! Thanks. I changed over all my CSS flyout menus from the CSSPlay method to the whatever:hover method. It's working great. I've just got a minor, but annoying, problem that occurs in IE (6 & 7 tested). URL 1 URL 2 Check out the left-side navigation menus on those two pages. Obviously they're different files, but the code is exactly the same for the menus (except the path for the links, of course). The pages even use the same stylesheet. So why, then, does the menu flutter when you hover over the "Our Dogs" <li> on the base level menu, but not move a pixel on the /dogs/ level menu? Here's the path to the stylesheet: Stylesheet 1 I was wondering if anyone knows of any tutorials or resources for creating a menu system using css. The problem I have is that when I change the submenu's which are divs to display, they pop into place. I want to change this aspect and assume there is a javascript solution to make the display slow down, but have not been able to find one on this forum or using google. Perhaps a pointer or two? Hello I hope somebody can help me. I have a newly designed home page for my website, which looks fine now in pretty well all browsers - but I've just started getting feedback from people looking at the site with ie, and they say that the flyout menu on the left of the page is obscured by the content in the centre column when it does its flying out thing. I've tried giving the menu elements z-index:100; but it doesn't seem to have made any difference. I would be really appreciative if anyone can help - it is even more difficult to work out as I don't have access to a machine with ie as a browser, and remote screen shots don't show up the problem... This is the page: http://www.independentliving.co.uk/index.shtml And this is the part of the style sheet for the menu: .menu { width:150px; position:relative; margin:0; font-size:11px; margin:0px 0; z-index:100; } .menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; color:#003366; width:150px; height:25px; text-align:center; border:1px solid #fff; border-width:1px 1px 0 0; background:#003366 url(nav.gif); line-height:19px; font-size:11px; z-index:100; } .menu ul { padding:0; margin:0; list-style-type: none; z-index:100; } .menu ul li { float:left; margin-right:1px; position:relative; z-index:100; } .menu ul li ul { display:none; } /* specific to non IE browsers */ .menu ul li:hover a { color:#996600; background:#cccccc; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul { display:block; position:absolute; top:0; left:150px; width:150px; z-index:100; } .menu ul li:hover ul li a.hide { background:#ffffff; color:#003366; font-size:11px; text-decoration:none; } .menu ul li:hover ul li:hover a.hide { width:150px; font-size:11px; text-decoration:none; } .menu ul li:hover ul li ul { display: none; } .menu ul li:hover ul li a { display:block; background:#cccccc; color:#996600; width:200px; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li a:hover { background:#dfc184; color:#666666; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li:hover ul { display:block; position:absolute; left:151px; top:0; color:#003366; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li:hover ul li a { display:block; width:200px; background:#dfc184; color:#003366; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li:hover ul li a:hover { background:#bd8d5e; color:#fff; font-size:11px; text-decoration:none; z-index:100; } Any ideas gratefully received! Thanks Frances I have a vertical flyout menu setup on the left side of the page with the associated links arranged in vertical columns next to each menu selection. It is working fine 99% of the time but I am getting some reports that the vertical columns do not touch the main selection column so that when the user moves the cursor to the right to go to the selection list there is a break between the columns and the column disappears before a selection can be made. I have not been able to duplicate this on my IE8 and it works fine with Firefox. This makes it rather hard to trouble shoot so I am hoping someone else has had this problem and know what I am talking about. It seems to only happen to users with IE7 and IE8 but not most IE8 users. Is there perhaps some code I need to add to the CSS file that will solve this problem? THX Hi, I am hoping someone can help me please. I am looking for some code (CSS, PHP or otherwise) to be able to create a drop down menu (with flyout) on mouseover of some pre-existing pictures. I have tried to take some codes which "sort of" do what I need but I'm unable to modify them to do what I need them to. It seems like the varying widths of the PNGs is a sticking point. At the minute I have a navigation bar consisting of 5 PNGs of same height but different widths. I had intended it to work so that when you click on these top links you are given a page for that section, and along the top of that page are "sub links". However, I have changed my mind and would like to keep the current images, but on rollover have a drop down menu appear with the different "sub links" instead of having them on the top of each page. For example I have a PNG which says "About Clan Wars". I would like a mouseover to show a Dropdown with flyout like: >What Is Clan Wars? >What are the rules ----> D Class Rules ----> C Class Rules >Clan Wars 1 ----> Fight Card ----> Pictures ----> Videos >Clan Wars 2 ----> Fight Card ----> Pictures ----> Videos I hope that makes sense to whoever is reading. Thank you Sean I would first like to start out by stating that I hope I put this in the right forum. If it is a problem with my html, then obviously I am trying to fix the wrong things. I also hope that I am using the proper terminology or something close enough that you can understand. Anyway, here is my problem. I have created a website for a dog rescue group with no spare money. So they picked me to create a website. I knew nothing about how to do it so I have been teaching myself along the way. The woman in charge of the group decided that she wanted a flyout in the left navigation and tasked me with creating it. So after a lot of research I thought I had it. Alas, I did not. That brings me to you guys. Firefox Problems: The flyouts are not big enough. They do not expand to fix the words. It looks much like text wrapping. I can't figure this out because it works in IE When I add lists in the main portion of the page and add a third tier to it, a flyout box appears at the top of the page instead of the list. Also on the lists, clicking on a something linked, stretches a "you clicked on me" box across the entire length of the page. (sorry for a lousy description. I don't know the actual term.) IE Problems: The colored boxes that surround the two links that have the flyouts, have an extra line of color below the link. I am not sure what is causing this. On one flyout are two links. The top one is cut off immediately after the word even though the one below it is not. It has the same problem with the third tier of lists being in a flyout at the top of the screen that Firefox has. If this isn't the correct area of code let me know. Oh, and I validated both the XHTML and CSS. CSS: PHP Code: #nav ul { margin:10px 0 10px 5px; padding:0 0 0 0; background:transparent; } #nav li { list-style-type: none; position: relative; background:#B7D7AF; color: #daa520; border:1px solid #7DB26E; text-align:left; padding:0 0 0 0; margin-bottom:6px; vertical-align: bottom; } #nav li a { color: #ffffff; font-weight:bold; text-decoration: none; display: block; padding:2px 0 2px 5px; } #nav li a:hover { background:#ffffff; color: #7F9BC5; } #nav li a:hover:after { background:#ffffff; color: #7F9BC5; content: url(img/square.gif) } #active a { display: block; color: #FFF; background-color: #99CCFF; width: 15.65em; padding: .2em .8em; text-decoration: none; } .navholder { width: 8em; float: left; display: inline; margin: 15px 20px 5px 20px; } ul a { display: block; padding: 5px 10px; vertical-align: bottom; text-align: left; text-decoration: none; color: #552; } ul ul { position: absolute; left: -3000px; background: #fed; } li:hover {background: #ddf;} ul li:hover ul { left: 10em; top: 2px; } ul a:hover {text-decoration: underline;} /* \*/ /*/ ul li ul {position: static;} /* */ XHTML: PHP Code: <div class="wrapper"> <div class="navholder"> <div class="leftcontent" id="nav"> <img alt="bg image" src="img/left_bg_top.gif" /> <ul> <li id="active"><a href="index.html">Home</a></li> <li><a href="about_us.html">About Us</a></li> <li><a href="our_team.html">The Team</a></li> <li style="z-index: 10;"><a href="adoption_process.html">Adoption Process</a> <ul> <li><a href="our_dogs.html">Our Dogs</a></li> <li><a href="special_needs_dogs.html">Special Needs Dogs</a></li> </ul> </li> <li style="z-index: 9;"><a href="how_to_help.html">How To Help Us</a> <ul> <li><a href="how_to_help_volunteer.html">Volunteer</a></li> <li><a href="how_to_help_foster.html">Foster</a></li> <li><a href="how_to_help_other.html">Other Ways To Help</a></li> </ul> </li> <li><a href="helpful_information.html">Helpful Information</a></li> <li><a href="contact_us.html">Contact Us</a></li> </ul> I have screenshots I may be able to post later, in case I am not explaining the problem correctly or so you can see what it looks like on my computer. I am new so I am restricted until 5 posts. I am not sure if you can look on my homepage in my profile (which is the same one I am talking about here). It is test.html and doctors_office.css Any help would be great. If someone knows and easier way of do this would (if I took the long/hard way), that would be great, also. Thanks in advance from someone new at this. Hi there. I'm developing a website using Wordpress as the major CMS, it uses a navigation plugin called NAVT which makes dynamic navigation menus and allows you to nest some links under other links. Click here to see how it outputs the HTML. Basically it's a series of unordered lists inside other unordered lists, cluttered with various classes (none of them used by the plugin itself). So basically I want to turn that into a pure CSS only flyout/dropdown menus, I've seen code flying around but with all those classes that NAVT applies I'm struggling to adapt it. Has anyone done something similar to this? Cheers, I am an amateur making a site for a friend. The way he wanted the site I could only do with tables (I know I shouldnt even say that word in a css forum). He wants a drop down menu. And seems to like simple ones. So I added a css drop down menu to the site. The problem is that when you mouse over and trigger the drop down it either makes the table much bigger to allow for the drop down (Firefox) or the drop down gets cut off by the bottom of the table (IE). I should mention that I am trying to get this menu centered on the page. If I use absolute positioning, will I have problems with different resolutions? Here is my .CSS Code:
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
top: 155px;
left: 324px;
z-index:100;
width: 780px; /* precision for Opera */
height: 28px;
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
Thanks for reading. hi, In my site, I'm trying to make the menu in a table. The table has many images, which only some are links. I did it so that hovering over a link cell, changes the image in the cell (and actually all of the link images are from one file, which everytime I show a different part of him). Now, everything seems to be working fine in Firefox and IE7, however, naturally IE6 doesn't work. Actually only the first cell, "Home", works, and the others don't. Any idea how can I fix it? here is the html for the menu: <div id="menu"> <table width="679" border="0" cellpadding="0" cellspacing="4"> <tr> <td class="link" id="nav_home"><a href="../home/index.htm" title="home">home</a></td> <td background="../../images/1.jpg"> </td> <td background="../../images/2.jpg"> </td> <td class="link" id="nav_about"><a href="../about/main.htm" title="about">about us</a></td> <td background="../../images/3.jpg"> </td> <td background="../../images/4.jpg"> </td> <td background="../../images/5.jpg"> </td> <td class="link" id="nav_recruit"><a href="../recruit/" title="recruit">recruit</a></td> <td background="../../images/6.jpg"> </td> </tr> <tr> <td background="../../images/7.jpg"> </td> <td background="../../images/8.jpg"> </td> <td class="link" id="nav_company"><a href="../company/outline.htm" title="company">company</a></td> <td background="../../images/9.jpg"> </td> <td background="../../images/10.jpg"> </td> <td class="link" id="nav_clients"><a href="../clients/clients.htm" title="clients">clients</a></td> <td background="../../images/11.jpg"> </td> <td background="../../images/12.jpg"> </td> <td class="link" id="nav_contacts"><a href="../contacts/contacts.htm" title="contacts">contacts</a></td> </tr> </table> </div> and here is the css: /* Regular menu items */ #nav_company {background: transparent url(../images/menu.jpg) 0 0 no-repeat;} #nav_about {background: transparent url(../images/menu.jpg) -71px 0 no-repeat;} #nav_clients {background: transparent url(../images/menu.jpg) -142px 0 no-repeat;} #nav_recruit {background: transparent url(../images/menu.jpg) -213px 0 no-repeat;} #nav_contacts {background: transparent url(../images/menu.jpg) -284px 0 no-repeat;} #nav_home {background: transparent url(../images/menu.jpg) -355px 0 no-repeat;} /* Hovered menu items */ #nav_company a:hover {background: transparent url(../images/menu.jpg) 0 -62px no-repeat;} #nav_about a:hover {background: transparent url(../images/menu.jpg) -71px -62px no-repeat;} #nav_clients a:hover {background: transparent url(../images/menu.jpg) -142px -62px no-repeat;} #nav_recruit a:hover {background: transparent url(../images/menu.jpg) -213px -62px no-repeat;} #nav_contacts a:hover {background: transparent url(../images/menu.jpg) -284px -62px no-repeat;} #nav_home a:hover {background: transparent url(../images/menu.jpg) -355px -62px no-repeat;} /* Active menu items */ body#company #nav_company {background: transparent url(../images/menu.jpg) 0 -62px no-repeat;} body#about #nav_about {background: transparent url(../images/menu.jpg) -71px -62px no-repeat;} body#clients #nav_clients {background: transparent url(../images/menu.jpg) -142px -62px no-repeat;} body#recruit #nav_recruit {background: transparent url(../images/menu.jpg) -213px -62px no-repeat;} body#contacts #nav_contacts {background: transparent url(../images/menu.jpg) -284px -62px no-repeat;} body#home #nav_home {background: transparent url(../images/menu.jpg) -355px -62px no-repeat;} I really need help... Thanks a lot!! Hi there, I have an HTML/CSS design I'm working on, that can be accessed he http://www.design-portal.co.uk/demo/ The CSS can be found he http://www.design-portal.co.uk/demo/style.css Basically what I would like is this: I want another static area that always appears at the bottom of the page underneath the main content text. As I've fixed the big box thing's height (it's going to appear the same height on every page) I want the user to be able to scroll to the next page if the text is too long to fit on the one page. I've created a screenshot as an example: http://www.design-portal.co.uk/demo/images/demo.jpg As you can see, the text at the bottom allows the user to scroll forwards and backwards. I can do this, but it never appears at the bottom; always just underneath the text above it depending on how much text is in the place. How can I just get the damn thing to stay at the bottom regardless of how much content is above it? Cheers in advance, Dave Hi, Here is my problem: I have a horizontal css menu using a list. It is embedded within a table <td> element. The menu is floating to the left as I suppose is inteneded by the css code, but I want the whole list to be centered with respect to the <td> element. I put <td align=center> but that does not center the whole list. It is still flushed against the left side of the <td> element. Also, I want the entire list to cover the entire width of the <table>. How do I accomplish these tasks? I have searched on google without any success. thank you for your help in advance. Here is the CSS code and Html code for your reference: CSS: Code:
<style type="text/css">
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 80px; /*Width of top level menu link items*/
#width: 95px;
_width: 95px;
padding: 2px 8px;
border: 0px solid #202020;
border-left-width: 0;
border-right-width: 0;
text-decoration: none;
/*background: url(http://asc2009.dreamhosters.com/menubg.gif) center center repeat-x;*/
color: white;
font: bold 13px Tahoma;
}
.horizontalcssmenu ul li a:visited{
color:white;
#color:white;
/*background: url(menubgover.gif) center center repeat-x;*/
}
.horizontalcssmenu ul li a:hover{
background: yellow;
color: blue;
#color: blue;
/*background: url(menubgover.gif) center center repeat-x;*/
}
HTML Code: Code: <table width="900" height="20" border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px solid black;"> <tr> <td background="menubg.jpg" align="center"> <div class="horizontalcssmenu" align="center"> <ul> <li><a href="default.htm">Home</a></li> <li style="border-left:1px solid black"><a href="default.htm">About Us</a></li> <li style="border-left:1px solid black"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Products</a></li> <li style="border-left:1px solid black"><a href="default.htm">Downloads</a></li> <li style="border-left:1px solid black"><a href="default.htm">Service</a></li> <li style="border-left:1px solid black"><a href="default.htm">Requests</a></li> <li style="border-left:1px solid black"><a href="default.htm">References</a></li> <li style="border-left:1px solid black"><a href="default.htm">What's New</a></li> <li style="border-left:1px solid black"><a href="default.htm">Contact Us</a></li> </ul> </div> </td> </tr> </table> Please visit my site where the menu is currently hosted. the url is http://asc2009.dreamhosters.com You will see my problem. You will notice when you hover your mouse over the last item in the menu, you will notice that the hover color does not go the whole way to the end of the td element. the list is flush to the left of the td element I need it to cover the whole width of the table. any help would be very much appreciated. Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like: Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Now clicking [+] in front of Google.com will look like. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e. Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting. Here is the source for the above: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>
<style type="text/css">
ul li ul {display:none;list-style-type: none;}
#myNav li a:hover {
color: blue;
}
#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}
#myNav { list-style-image: url(page.GIF); }
</style>
<script type="text/javascript">
<!--
function initNav() {
var navObj = document.getElementById('myNav');
var ulCollection = navObj.getElementsByTagName('li');
for (var loop = 0; loop < ulCollection.length; loop++) {
if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
/* we have an LI that contains a UL */
if (ulCollection[loop].getElementsByTagName('span').length > 0) {
/* there is at least one SPAN tag present */
ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
}
}
}
}
window.onload = initNav;
//-->
</script>
</head>
<body>
<ul id="myNav">
<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
<li><span></span><a href="http://www.google.com">Google.com</a>
<ul>
<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
<ul>
<li>*3*</li>
<li>*4*</li>
</ul>
</li>
</ul>
</li>
<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
<ul>
<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
</ul>
</li>
</ul>
</body>
</html>
Any help is really appreciated thanks. EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears. (My drop down is vertically aligned on the left.) (bits of the code that relate to the menu) PHP Code: .btn1 { position: absolute; left: 165px; top: 200px; } .btn2 { position: absolute; left: 165px; top: 240px; } .btn3 { position: absolute; left: 165px; top: 280px; } .btn4 { position: absolute; left: 165px; top: 320px; } .btn5 { position: absolute; left: 165px; top: 360px; } .btn6 { position: absolute; left: 165px; top: 400px; } .btn7 { position: absolute; left: 165px; top: 440px; } .btn8 { position: absolute; left: 165px; top: 480px; } .link1 { position: absolute; left: auto; top: 240px; } .link2 { position: absolute; left: auto; top: 280px; } .link3 { position: absolute; left: auto; top: 320px; } .link4 { position: absolute; left: auto; top: 360px; } .link5 { position: absolute; left: auto; top: 400px; } .link6 { position: absolute; left: auto; top: 440px; } .link7 { position: absolute; left: auto; top: 480px; } .link8 { position: absolute; left: auto; top: 520px; } .link9 { position: absolute; left: auto; top: 560px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 100px; } #nav li { width: 100px; } #nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; } #nav li:hover ul { display: block; left: 266px; z-index: 3; } #nav li:over ul { display: block; left: 266px; z-index: 3; } PHP Code: <ul id="nav"> <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li> <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a> <ul> <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li> <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li> <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li> <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li> <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li> </ul> </li> <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a> <ul> <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li> <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li> <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li> <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li> </ul> </li> <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a> <ul> <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li> </ul> </li> <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a> <ul> <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li> <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li> <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li> </ul> </li> <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a> <ul> <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li> <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li> </ul> </li> <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li> <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li> </ul> <script type="text/javascript" src="drop_down.js"></script> the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later. link: The Page I am a photographer for a website and I know very little about anything other than basic html. With the website lady gone on a trip around the world for a year, I ended up being the person to attempt to modify our side menu to show an additional column of subcategories. I tinkered around with the code we had and I managed to get this to work in Firefox, however in IE7 the contents of the menu shift down a few pixels when you hover over a category. To view my problem, go to scannerparts.biz I've messed around with this for a few days and everything has become a big confusing mess so I have no choice but give in and ask for help. I thank anyone in advance for any assistance you can offer. -Emerson Here is the code: hover.css Code:
<!--
body {
behavior: url(/images/csshover2.htc);
}
div#categorynav ul {margin: 0px; padding: 0px;}
.submenu {
position: relative;
margin: 0px;
padding: 2px 0px;
width: 178px;
}
div#categorynav ul.level1 li a {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level2 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level3 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level1 ul.level2 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
div#categorynav ul.level2 ul.level3 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
html>body div#categorynav ul.level1 ul.level2 a {
width: auto;
padding: 0px;
margin: 0px;
}
html>body div#categorynav ul.level2 ul.level3 a {
width: auto;
padding: 0px;
margin: 0px;
}
div#categorynav>ul a {width:auto; padding: 0px; margin: 0px;}
div#categorynav ul ul {position: absolute; display: none; width: 100px; z-index:900; padding: 0px; margin: 0px;}
div#categorynav ul ul li {padding: 0px; margin: 0px;}
div#categorynav ul.level1 li.submenu:hover ul.level2 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 li.submenu:hover ul.level3 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level2 li a:hover {
background-color: #000000;
color: red;
}
div#categorynav ul.level3 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level3 li a:hover {
background-color: #000000;
color: red;
}
Abbreviated Header Source (abbreviated for max character requirement, I think I left all the vital stuff there) Code:
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<ss:comment><link href="hover.css" type="text/css" rel="stylesheet" media="screen"/></ss:comment>
<link href="$store.images['hover.css']" type="text/css" rel="stylesheet" media="screen"/>
<style type="text/css">
<!--
/* Style Sheet */
body {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 30px;
margin-left: 1px;
background-image: url(/images/backgroundgray.jpg);
background-repeat: repeat-x;
background-position: center bottom;
}
html { height: 100%; margin-bottom: 1px; }
#outline{
border :0px solid #ffffff;
width :760px;
}
#categories{
background-color:#000000;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 5px 5px 1px 0px;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight :normal;
font-size: 9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width: 178px;
padding: 0px;
}
#cat1 a{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1 a:hover{
background-color:#000000;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
.leftnav {
background-color:#000000;
color:#ffffff;
text-decoration:none;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
padding : 2px 5px 1px 0px;
}
.leftnav A:link {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:visited {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:hover {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:active {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
A:link {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:visited {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:hover {text-decoration:none;color:<ss:value source=$font.paragraph.color/>;}
A:active {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
.content {font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
.title {font-size:10pt;font-weight:bold;font-family:<ss:value source=$font.paragraph.face/>
;color:#ffffff;}
.footer {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
-->
</style>
</head>
<body>
<center>
<div id="outline">
<table width="760" border="0" cellspacing="0" cellpadding="0">
<!-- banner image -->
<tr valign="top"><td colspan="4"><a href="(URL address blocked: See forum rules)"><ss:image source="$templateSet.images['header.jpg']" border="0"/></a></td></tr>
<tr valign="top">
<!-- left nav -->
<td bgcolor="#000000"> </td>
<td width="175" bgcolor="#000000">
<div class="leftnav">
<!-- store logo -->
</div>
<div class="leftnav">
<div style="border-bottom : 0px solid #666666;"> </div>
<!-- home -->
</div>
<!-- categories -->
<p><font face="Arial,Helvetica,sans-serif" size="2" color="white"><b>Parts and Products:</b></font></p>
<div id="categorynav">
<div id="categories">
<ul class="level1">
<ss:foreach item="category" within="$catalog.categoryList()">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '1'">
<ss:set name="hasSub" value="0"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/>
</ss:foreach>
<li class="submenu">
<div id="cat1"><ss:link source="$category"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level2">
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '2'">
<ss:set name="hasSub" value="1"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/></ss:foreach></ss:if>
</li>
<li class="submenu">
<div id="cat1"><ss:link source="$subcategory"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level3">
<ss:foreach item="subcategory" within="$subcategory.childrenToDepth(1)">
<li><ss:link source="$subcategory" title="$subcategory.name"/></li>
</ss:foreach>
</ul>
</ss:if>
</ss:foreach>
</ul>
</ss:if></ss:foreach>
</li>
</ss:if></ss:if></ss:foreach>
<br>
</ul>
</div>
</div>
I'm helping these fine folks fix a few little issues with their site but this one I can't seem to quite figure out. If you roll over the main menu you will see the sub menu slide down on the left. For the life of me I can't get it to line up under the main nav. I've tried many, many things. Can anyone provide a few hints, tips, suggestions? Thanks so much!!! 98.214.188.71/life at excel.htm Code: /*******************menu starts********************/ #menu{float:left; width:100%; background:#ffffff;} #menu a{font-weight:bold; line-height:16px;} #menu table{float:left; width:100%; background:transparent;} #menu .menu01{width:147px;} #menu .menu01 a{float:left; /*width:149px;*/width:100%; height:26px; background:url(images/menu01.gif) no-repeat right 0; float:left; color:#fff; text-decoration:none; text-align:center; padding:10px 0 0 0} #menu .menu01 a.current{float:left; /*width:149px;*/width:100%; height:26px; background:url(images/menu01.gif) no-repeat right 0; cursor:pointer;} #menu .divider{width:.5%; height:36px; background:url(images/white_divider.gif) repeat-x 0 1px;} #menu .menu02{} #menu .menu02 a{display:block; background:url(images/menu02.gif) repeat-x right 0; padding:10px 0 0; height:26px; color:#fff; text-decoration:none; text-align:center} #menu .menu02 a.current{float:left; width:100%; background:url(images/menu02.gif) no-repeat right bottom; color:#fff; cursor:pointer;} #menu .menu03{} #menu .menu03 a{display:block; background:url(images/menu03.gif) repeat-x right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu03 a.current{float:left; width:100%; background:url(images/menu03.gif) no-repeat right bottom; height:26px; color:#fff; cursor:pointer;} #menu .menu04{width:152px; } #menu .menu04 a{float:left; /*width:152px;*/width:100%; background:url(images/menu04.gif) no-repeat right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu04 a.current{float:left; /*width:152px;*/width:100%; background:url(images/menu04.gif) no-repeat right bottom; height:26px; color:#fff; cursor:pointer;} #menu .menu05{width:143px;} #menu .menu05 a{float:left; /*width:143px;*/ width:100%;background:url(images/menu05.gif) no-repeat right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu05 a.current{float:left; /*width:143px;*/width:100%; background:url(images/menu05.gif) no-repeat right -43px; height:26px; color:#fff; cursor:pointer;} .exp{ display:none; clear:both; text-align:center; background:#BA8747; z-index:4; } #menu DIV.sub-mlinks A { color:#000; background:none; font-weight:bold; padding-top:2px; padding-bottom:0px; display:block; height:auto; } #menu DIV.sub-mlinks A:hover{ color:#FFF; } /*******************menu ends********************/ <div id="menu"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="970"><tbody><tr> <td style="width: 19.6%;" id="item1" class="menu01"><a href="http://www.excelfoundry.net/lifeatexcel/">Home</a></td> <td class="divider"> </td> <td style="width: 19.6%;" id="item2" class="menu02" onmouseover="expand(this.id, 'menu2');" onmouseout="collapse(this.id, 'menu2');" onmouseleave="collapseIE(this.id, 'menu2');"><a href="http://www.excelfoundry.net/lifeatexcel/">Excel Tools</a><div id="menu2" class="exp" onmouseout="collapse('item2', this.id);" onmouseleave="collapseIE('item2', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/improvement" target="_new" class="menuitem">Continual Improvement</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/service" target="_new" class="menuitem">Crusher Service (FLSP)</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/xlu" class="menuitem">Excel University</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/crm/data" target="_new" class="menuitem">Excelerator CRM</a></div><div class="sub-mlinks"><a href="http://ezlmwc.adp.com/" target="_new" class="menuitem">EZLabor</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/First%20Article/First%20Article%20Parts.xls" class="menuitem">First Article Parts</a></div><div class="sub-mlinks"><a href="https://login.postini.com/exec/login" class="menuitem">FLS Spam Filter Login</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/ecr/" target="_new" class="menuitem">FLSP ECR</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/forms" class="menuitem">Forms Library</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/iso9001" class="menuitem">ISO 9001 Procedures</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/helpdesk" target="_new" class="menuitem">IT Help Desk</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/machine-info" class="menuitem">Machine Info</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/Manu_Memos/Memos.html" target="_new" class="menuitem">Manufacturing Memos</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/metrics" class="menuitem">Metrics</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/msq" target="_new" class="menuitem">MSQ Editor</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/manuals" class="menuitem">Parts Manuals</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/parts" target="_new" class="menuitem">Parts Search</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/po" target="_new" class="menuitem">PO Tool</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/flows" class="menuitem">Process Flows</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/revSupport" target="_new" class="menuitem">Revision Support</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/routing" class="menuitem">Routing Guide</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/safety" class="menuitem">Safety & Training</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/docs/QRM%20Schedule.xlsx" class="menuitem">QRM Schedule</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/training" class="menuitem">Training Request System</a></div><div class="sub-mlinks"><a href="http://my.concureworkplace.com/default.asp?companyid=excet5jvd2telbgk" target="_new" class="menuitem">Travel Expense (EFM)</a></div><div class="sub-mlinks"><a href="http://my.concureworkplace.com/default.asp?companyid=smid5gr1t0br0czj" target="_new" class="menuitem">Travel Expense (FLSP)</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/xcalibur" target="_new" class="menuitem">Xcalibur</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%; color: black;" id="item3" class="menu03" onmouseover="expand(this.id, 'menu3');" onmouseout="collapse(this.id, 'menu3');" onmouseleave="collapseIE(this.id, 'menu3');"><a href="http://www.excelfoundry.net/lifeatexcel/">Our People</a><div style="top: 168px; left: 376px; width: 183px; position: static; visibility: hidden; display: none;" id="menu3" class="exp" onmouseout="collapse('item3', this.id);" onmouseleave="collapseIE('item3', this.id);"><div class="sub-mlinks"><a href="https://login.fidelity.com/ftgw/pages/fesco/html/NBParticipantLogout.html" target="_new" class="menuitem">401k Login</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/classifieds" class="menuitem">Classifieds</a></div><div class="sub-mlinks"><a href="http://excelfoundry.net/lifeatexcel/?q=our-people/hr/directory" class="menuitem">Employee Directory</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/eu" class="menuitem">Excel University</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/insite" class="menuitem">FLSmidth Insite</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.com/about-excel/company-history" class="menuitem">History of Excel</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/hr" class="menuitem">Human Resources</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/dates" class="menuitem">Important Dates</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/jobs" class="menuitem">Job Openings</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/mlb" class="menuitem">MLB Standings</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/phone" class="menuitem">Phone Directory</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/380" class="menuitem">Quality and Mission Statement</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/docs/EFM%20HR%20XLU%20Servant%20Leadership%20Academy.pdf" class="menuitem">Servant Leadership Academy Info</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/training" target="_new" class="menuitem">Training Request System</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%;" id="item4" class="menu04" onmouseover="expand(this.id, 'menu4');" onmouseout="collapse(this.id, 'menu4');" onmouseleave="collapseIE(this.id, 'menu4');"><a href="http://www.excelfoundry.net/lifeatexcel/">Departments</a><div id="menu4" class="exp" onmouseout="collapse('item4', this.id);" onmouseleave="collapseIE('item4', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/accounting" class="menuitem">Accounting & Administration</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/support" class="menuitem">Customer Support</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/engineering" class="menuitem">Design Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/foundry" class="menuitem">Foundry</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/hr" class="menuitem">Human Resources</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/it" class="menuitem">IT</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/machine" class="menuitem">Machine Shops</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/maintenance" class="menuitem">Maintenance</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/mktg_wo" class="menuitem">Marketing</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/materials" class="menuitem">Materials</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/193" class="menuitem">Manufacturing Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/192" class="menuitem">Production Control</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/quality" class="menuitem">Quality Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/187" class="menuitem">Sales</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/toolcrib" class="menuitem">Tool Crib</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/warehouse" class="menuitem">Warehouse</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%; color: black;" id="item5" class="menu05" onmouseover="expand(this.id, 'menu5');" onmouseout="collapse(this.id, 'menu5');" onmouseleave="collapseIE(this.id, 'menu5');"><a href="http://www.excelfoundry.net/lifeatexcel/">Our Customers</a><div style="top: 168px; left: 752px; width: 183px; position: static; visibility: hidden; display: none;" id="menu5" class="exp" onmouseout="collapse('item5', this.id);" onmouseleave="collapseIE('item5', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-customers/highlights" class="menuitem">Customer Highlights</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-customers/equipment" class="menuitem">Equipment Profiles</a></div></div></td> </tr></tbody></table> </div>
Hi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! Ok, I know virtually nothing about css, but realized that that a css menu is better for SEO. Anyway I found this vertical menu that works the way I want it. But I also need a horizontal version of it with dropdown submenus. Can someone help with this? I have been trying a bunch of things but it just looks awful and doesn't work right. It has 3 basic componets; Html, Javascript, and css. Here they are below. drop_down.js: Code: // JavaScript Document
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;
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style2.css";
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
Style2.CSS: Code: body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
Hi folks. I'm hoping someone can help me out. I have a template I've been working with (struggling with). It has a style sheet attached to it and I'm trying to replace the main, static menu with a drop down Spry Menu. I've managed to get most of it figured out but my dropdowns aren't colored correctly. The Spry Menu isn't centered on the page. The menu titles are spread out too far also (ie. it's suppose to be "About Me" but the "Me" is way below the "About"). I'm guessing it's probably an easy fix for you all but I've been playing with it all day without a lot of progress. Thank you. Let me know if I should post links. |
|||||||