|
CSS - Suckerfish Dropdown Problems
http://www.describe.org/homework/esdcar
http://www.describe.org/homework/esdcar/esdcar.css Three things: One is that in FF, etc, the dropdown for the single level labels (about, events) as opposed to the doubledecker ones (buyers) start too high -- not at the bottom of the box. I've tried playing with padding, height, margins...I must not have hit on the right combo yet, but I can't get it right. The second, though minor, is why there's a tiny crack that appears between one set of boxes (which set changes). I tried bumping up the width on one box by a tenth but that just caused the whole menubar to wrap down to a second line. The third is that the javascript doesn't work on IE. I copied it straight from the suckerfish/html dog tutorial and substituted the appropriate div name, but it's not working. (I haven't tried fixing anything else in IE yet, so it all looks bad...but the js should work.) late edit: I forgot to say that if I could, I'd like the single-level labels to be centered vertically, too, instead of up at the top... Similar TutorialsI'm working on my first suckerfish dropdown for a site. I'm encountering two problems. 1) There is no background color on the subitems when i select the main item, making them hard to read 2) Internet Explorer displays the dropdown to the right of the main list item, rather than below. Netscape displays it correctly. Is this due to something I altered? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Markey Home Remodeling</title>
<link href="main.css" rel="stylesheet" type="text/css">
<style title="text/css">
#container {
width: 562px;
background: #F4ECD9;
text-align: left;
margin: 0 auto;
}
#nav, #nav ul {
float: left;
width: 562px;
list-style: none;
line-height: 1;
background: EAE3A3;
font-weight: bold;
padding: 0;
margin: 0 0 1em 0;
}
#nav a {
display: inline;
width: 10em;
w\idth: 6em;
color: #7C6240;
text-decoration: none;
padding: 0.25em 2em;
}
#nav a.daddy {
background: url(rightarrow2.gif) center right no-repeat;
}
#nav li {
float: right;
padding: 0;
width: 10em;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}
#nav li li {
padding-right: 1em;
width: 13em
}
#nav li ul a {
width: 13em;
w\idth: 9em;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: white;
}
</style>
<script type="text/javascript">
sfHover = function()
{
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function()
{
this.className+=" sfhover";
}
sfEls[i].onmouseout=function()
{
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<table width="800" border="0" cellspacing="0" cellpadding="0" class="tableborder" align="center">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td height="20" width="562" class="leftnav">
<div id="container">
<ul id="nav">
<li><a href="#">SIDING</a></li>
<li><a href="#">GUTTERS</a></li>
<li><a href="#">BASEMENTS</a></li>
<li><a href="#">WINDOWS</a>
<ul>
<li><a href="#">300 Series</a></li>
<li><a href="#">900 Series</a></li>
<li><a href="#">Sliding</a></li>
<li><a href="#">Bay and Bow</a></li>
</ul>
</li>
<li><a href="#">DOORS</a>
<ul>
<li><a href="#">Entry</a></li>
<li><a href="#">Patio</a></li>
<li><a href="#">Garage</a></li>
</ul>
</li>
</ul>
</div></td>
<td class="rightnav">
<div id=linkstyles> <a href="#">HOME</a> <a href="#">CONTACT US</a>
</div></td></tr>
<tr>
<td>
<table width="562" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/mainimage.jpg"></td>
</tr>
<tr>
<td><div align="center"><img src="images/whychoose.jpg"></div></td>
</tr>
<tr><td>
<table width="98%" border="0" cellspacing="0" cellpadding="0" align="center" class="maincontenttable">
<tr>
<td width="50%">REPUTATION: A proven track record with thousands of
delighted customers.
<br><br>
QUALITY: The highest quality products, the best trained
window installers
*all A.W.D.I. (American Window and Door Installed) Certified.
<br><br>
PRICE: The lowest prices on the highest quality
brand-name products. Period.
<br><br>
Factory Authorized Distribution, Factory Trained
Employees.
<br><br>
Qualified, Courteous Salespeople treat you with
professionalism and respect.
</td>
<td width="355"> </td>
</tr>
</table>
</td></tr>
</table>
</td>
<td valign="top" width="100%" class="mainrighttable">
<table width="230" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td><img src="images/pledge.jpg" hspace="5" vspace="5"></td>
</tr>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="right" class="rightcontenttable">
<tr>
<td>Our business has always been family owned
and operated. For more than 27 years, we
have served our community with pride and
integrity. Years ago, the best craftsmen always
put their names on their work.
<br><br>
We still do.</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<span class="style1"></span></td>
</tr>
</table>
</body>
</html>
Thanks for your help http://www.strutmag.com/menu06/ CSS In IE:Win The dropdown does not drop down right below the black tab, as it should; it starts to drop down about halfway through the tab. This is my first time really customizing a Suckerfish menu and I'm not really sure how I would go about tackling this problem. Thanks for any help or suggestions! I'm modifying the Suckerfish dropdown menu, and while it looks perfect in FF, it's slightly off in IE (shocker, I know). In IE, the top-level menu items don't conform to the 20px height I've been using as a standard when you hover above them. I've done a ton of fiddling to see if I can solve the problem, but can't get it. I'm willing to bet the answer is simple, and that someone will catch something I missed. The menu is being developed at: http://ts.bisonman.com/dropdown_test.php And here's the code: Code: <style type="text/css">
body {
font-family: arial, helvetica, serif;
}
div.navbar {
width: 780px;
height: 20px;
background: #6699CC;
}
ul { /* all lists */
height:20;
padding: 0px;
margin: 0;
list-style: none;
white-space: nowrap;
}
li { /* all list items */
float: left;
position: relative;
width: 110px;
height: 20px;
background: #6699CC;
color: #FFFFFF;
text-decoration: none;
font-size: 15px;
font-weight: bold;
white-space: nowrap;
}
li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
width: 180px;
white-space: nowrap;
background: #FFFFFF;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
height: 20px;
}
li:hover a, li.over a { /* maintains block and border width */
display: block;
height: 20px;
white-space: nowrap;
}
li:hover ul a, li.over ul a { /* creates border around dropdown menus */
width: 180px;
height: 20px;
/* border-style: solid;
border-width: 1px;
border-color: #FFFFFF; */
white-space: nowrap;
}
#content {
clear: left;
}
a {
text-decoration: none;
color: #FFFFFF;
height: 20px;
}
a.under {
width: 160px;
height: 20px;
background: #6699CC;
color: #FFFFFF;
}
a:hover {
background: #FFFFFF;
color: #6699CC;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
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>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<!-- <div class="navbar"> -->
<table width=780 bgcolor=#6699CC border=0 height=20 cellpadding=0 cellspacing=0>
<tr>
<td valign=top width=20 NOWRAP height=20> </td>
<td valign=bottom NOWRAP height=20>
<ul id="nav">
<li><a href="/index.php?page=about">About</a>
<ul>
<li><a class="under" href="/index.php?page=faculty">Faculty</a></li>
<li><a class="under" href="/index.php?page=about&subject=history">History</a></li>
<li><a class="under" href="/index.php?page=about&subject=alumni">Alumni</a></li>
<li><a class="under" href="/index.php?page=about&subject=philosophy">Philosophy</a></li>
<li><a class="under" href="/index.php?page=about&subject=advisory_board">Advisory Board</a></li>
<li><a class="under" href="/index.php?page=about&subject=letter_from_terry">Message from Terry</a></li>
</ul>
</li>
<li><a href="/index.php?page=classes">Classes</a>
<ul>
<li><a class="under" href="/index.php?page=classes&subject=scenestudy">Ongoing Scene Study</a></li>
<li><a class="under" href="/index.php?page=classes&subject=beginning">Beginning Technique</a></li>
<li><a class="under" href="/index.php?page=classes&subject=on_camera_1">On Camera</a></li>
<li><a class="under" href="/index.php?page=classes&subject=body_dynamics">Body Dynamics</a></li>
<li><a class="under" href="/index.php?page=classes&subject=vocal_production">Vocal Production</a></li>
<li><a class="under" href="/index.php?page=classes&subject=specialty">Specialty Classes</a></li>
<li><a class="under" href="/index.php?page=classes&subject=conservatory">Conservatory/Intensive</a></li>
</ul>
</li>
<li><a href="/index.php?page=theater">Theater</a>
<ul>
<li><a class="under" href="/index.php?page=theater&subject=on_stage_now">On Stage Now</a></li>
<li><a class="under" href="/index.php?page=theater&subject=current_season">Current Season</a></li>
<li><a class="under" href="/index.php?page=theater&subject=past_seasons">Past Seasons</a></li>
<li><a class="under" href="/index.php?page=theater&subject=past_reviews">Past Reviews</a></li>
<li><a class="under" href="/index.php?page=theater&subject=auditions">Auditions</a></li>
<li><a class="under" href="/index.php?page=theater&subject=tickets">Tickets</a></li>
</ul>
</li>
<li><a href="/index.php?page=awards">Awards</a>
<ul>
<li><a class="under" href="/index.php?page=theater&subject=past_reviews">Reviews</a></li>
<li><a class="under" href="/index.php?page=awards&subject=mayors_award">Mayor's Award</a></li>
<li><a class="under" href="/index.php?page=awards&subject=gore_letter">Al Gore Letter</a></li>
<li><a class="under" href="/index.php?page=awards&subject=mekler_book">Terry in Mekler</a></li>
<li><a class="under" href="/index.php?page=awards&subject=50_best">50 Best</a></li>
</ul>
</li>
<li><a href="/index.php?page=events">Events</a>
<ul>
<li><a class="under" href="/index.php?page=events&subject=achievements">Achievement Awards</a></li>
<li><a class="under" href="/index.php?page=events&subject=celebrities">Celebrities</a></li>
<li><a class="under" href="/index.php?page=events&subject=conversations">"Conversations with..."</a></li>
</ul>
</li>
<li><a href="/index.php?page=membership">Members</a>
<ul>
<li><a class="under" href="/index.php?page=membership&subject=donate">Donations</a></li>
<li><a class="under" href="/index.php?page=membership&subject=subscriptions">Subscriptions</a></li>
<li><a class="under" href="/index.php?page=membership&subject=club_members">Club Members</a></li>
</ul>
</li>
<!-- <li><a href="/index.php?page=contact">Contact</a></li>
<li><a href="/index.php">Home</a></li> -->
</ul>
</td>
</tr>
</table>
<!-- </div> -->
</BODY>
</HTML>
I've researched and tried just about every variation. The issue is in IE6. I have a CSS dropdown menu based on the suckerfish dropdown. But in my case, the main nav bar uses images (backgrounds) and the dropdowns are text. In IE6, the menu displays -- but disappears when you go to mouseover one of the sub-items. BUT, if you quickly mouse down past the first sub-item -- it will stay and work correctly. Very odd. Here's my HTML: Code: <ul id="navLeft"> <li id="home"><a class="topNav" href="/" title="Home">Home</a></li> <li id="services"><a class="topNav" href="#" title="Services">Services</a> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <li id="about"><a class="topNav" href="/about-us/" title="About Us">About Us</a> <ul> <li><a href="#">Link</a></li> </ul> </li> <li id="resources"><a class="topNav" href="/resources/" title="Resources">Resources</a> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <li id="contact"><a class="topNav" href="/contact-us/" title="Contact Us">Contact Us</a> <ul> <li><a href="#">Link</a></li> </ul> </li> </ul> And here's my CSS: Code: #navLeft {
width: 659px;
height: 62px;
float: left;
list-style-type: none;
margin: 0;
padding: 0
}
#navLeft li {
position: relative;
float: left;
}
#navLeft li a.topNav {
display: block;
padding-top: 62px;
height: 0;
overflow: hidden
}
#navLeft li#home { background-image: url("images/nav_home_bt.png"); background-repeat: no-repeat; width: 110px }
#navLeft li#home a.topNav:hover { background-image: url("images/nav_home_sbt.png"); background-repeat: no-repeat }
#navLeft li#services { background-image: url("images/nav_services_bt.png"); background-repeat: no-repeat; width: 130px }
#navLeft li#services a.topNav:hover { background-image: url("images/nav_services_sbt.png"); background-repeat: no-repeat }
#navLeft li#about { background-image: url("images/nav_about_bt.png"); background-repeat: no-repeat; width: 127px }
#navLeft li#about a.topNav:hover { background-image: url("images/nav_about_sbt.png"); background-repeat: no-repeat }
#navLeft li#resources { background-image: url("images/nav_resources_bt.png"); background-repeat: no-repeat; width: 144px }
#navLeft li#resources a.topNav:hover { background-image: url("images/nav_resources_sbt.png"); background-repeat: no-repeat }
#navLeft li#contact { background-image: url("images/nav_contact_bt.png"); background-repeat: no-repeat; width: 148px }
#navLeft li#contact a.topNav:hover { background-image: url("images/nav_contact_sbt.png"); background-repeat: no-repeat }
#navLeft li ul {
position: absolute;
top: -9999px
}
#navLeft li:hover ul, #navLeft li.over ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #fff;
top: 58px;
left: -35px;
width: 200px;
border-right: 3px solid #f6a6b3;
border-bottom: 3px solid #f6a6b3;
border-left: 3px solid #f6a6b3;
z-index: 9999
}
#navLeft li li {
float: none
}
#navLeft li li a {
color: #948b5f;
background-color: #fff;
font-size: 14px;
font-family: "Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
padding: 8px;
width: 184px;
border-top: 1px dashed #d2cdb2
}
#navLeft li li a:hover {
color: #fff;
background-color: #aece7b
}
Any help would be greatly appreciated. I'm stumped. Hi I am using suckerfish drop down menu without problem on my local server, however, on the remote server them menu won't work when jscript is turned off (when viewed on IE). Do you have any idea why this might be? has anyone had this problem before? (here is the url: (URL address blocked: See forum rules)) thanks a lot I was working on a menu following the suckerfish tutorial at Alist Apart and I've got it working in FF but not IE6. Big surprise. There's 2 issues with IE 6: 1. The menu is sitting lower in IE than in FF. 2. The dropdowns aren't working in IE at all. I've applied the js hack and it's still not working. I can't find what I'm missing but I know it's there somewhere. Here's the url: menu Please help. Thanks. Brad Hi all, The following CSS and HTML work fine in Mozilla, Netscape and Firefox. It can be viewed in action at: http://www.sirfragalot.com/wikindx2/ (choose the 'chocolate vanilla fudge sundae' from the Wikindx/preferences menu.) I have two questions: 1/ I'm aware that Konqueror does not support CSS drop-downs. It doesn't concern me as I've programmed a way around it. However, the menu items occasionally stack up vertically on the left side of the browser window: they're supposed to be horizontal. This stacking and subsequent un-stacking seems to be quite random. What's the fix? 2/ In IE, the drop-downs are rendered from the bottom right corner of the originating top menu item (they should be directly underneath). What is the fix? HTML CODE: 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" xml:lang="en" lang="en">
<!-- begin header template (+ 3 lines up!) -->
<head>
<title>WIKINDX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="chocolate.css" type="text/css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<!-- begin menue template -->
<table class="menuTable" border="0" cellspacing="0" cellpadding="0" align="left">
<tr class="" align="left" valign="top">
<td class="" align="right" valign="top">
<ul id="nav">
<li><a class="menuLi" href="index.php?action=frontNoMenu">Wikindx</a>
<ul>
<li><a class="menu" href="index.php">Home</a></li>
<li><a class="menu" href="index.php?action=preferencesDisplay">Preferences</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=fileNoMenu">File</a>
<ul>
<li><a class="menu" href="index.php?action=exportRtf">Export RTF</a></li>
<li><a class="menu" href="index.php?action=exportBibtex">Export BibTeX</a></li>
<li><a class="menu" href="index.php?action=showFiles">Show Files</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=editNoMenu">Edit</a>
<ul>
<li><a class="menu" href="index.php?action=editCreator">Creator</a></li>
<li><a class="menu" href="index.php?action=editJournal">Journal</a></li>
<li><a class="menu" href="index.php?action=editPublisher">Publisher</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=resourceNoMenu">Resources</a>
<ul>
<li><a class="menu" href="index.php?action=listDisplay">List</a></li>
<li><a class="menu" href="index.php?action=searchDisplay">Search</a></li>
<li><a class="menu" href="index.php?action=selectDisplay">Select</a></li>
<li><a class="menu" href="index.php?action=resourceNew">New</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=textNoMenu">Text</a>
<ul>
<li><a class="menu" href="index.php?action=allMusings">Musings</a></li>
<li><a class="menu" href="index.php?action=randomMusing">Random Musing</a></li>
<li><a class="menu" href="index.php?action=allParaphrases">Paraphrases</a></li>
<li><a class="menu" href="index.php?action=randomParaphrase">Random Paraphrase</a></li>
<li><a class="menu" href="index.php?action=allQuotes">Quotes</a></li>
<li><a class="menu" href="index.php?action=randomQuote">Random Quote</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=adminNoMenu">Admin</a>
<ul>
<li><a class="menu" href="index.php?action=superadminLogonDisplay">Logon</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=helpNoMenu">Help</a>
<ul>
<li><a class="menu" href="index.php?action=helpDisplay">Wikindx Help</a></li>
<li><a class="menu" href="index.php?action=aboutWikindx">About Wikindx</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
<br />
<!-- end menu template -->
</body>
<!-- end footer template (+ 1 line down!) -->
</html>
CSS CODE: Code: body {
background : #74664a;
font-family : sans-serif;
font-size : 0.9em;
color : #f6eedf;
}
/* SuckerFish CSS drop down style */
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 7em;
}
#nav li {
float: left;
width: 7em;
background : red;
}
#nav li ul {
position: absolute;
width: 7em;
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
/* End Suckerfish Style */
/* Standard links such as top menu links */
A:visited, A:link, A:active {
text-decoration : none;
color : #74664a;
background : #efd197;
border-left : 1px groove #f6eedf;
border-top : 1px groove #f6eedf;
border-right : 1px groove #f6eedf;
border-bottom : 1px groove #f6eedf;
font-size : 0.9em;
}
A:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border-left : 1px groove #f6eedf;
border-top : 1px groove #f6eedf;
border-right : 1px groove #f6eedf;
border-bottom : 1px groove #f6eedf;
font-size : 0.9em;
}
/* .menu = submenu links */
A.menu:visited, A.menu:link, A.menu:active {
text-decoration : none;
color : #74664a;
display : block;
border-bottom : 1px solid #f6eedf;
width : 6em;
background : #efd197;
font-size : 0.9em;
text-align : left;
}
A.menu:hover {
text-decoration : none;
background : #f6eedf;
display : block;
color : #74664a;
border-bottom : 1px solid #f6eedf;
width : 6em;
font-size : 0.9em;
text-align : left;
}
/* normal links and paging links */
A.link:visited, A.link:link, A.link:active, A.page:visited, A.page:link, A.page.active {
text-decoration : none;
color : red;
background : transparent;
border : none;
}
A.link:hover, A.page:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border : none;
border : none;
}
/* resource links for resource URLs */
A.rLink:visited, A.rLink:link, A.rLink:active {
text-decoration : none;
background : transparent;
color : #f6eedf;
border : none;
}
A.rLink:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border : none;
border : none;
}
/* image links */
A.imgLink:visited, A.imgLink:link, A.imgLink:active {
text-decoration : none;
background : transparent;
border : none;
}
A.imgLink:hover {
text-decoration : none;
background : transparent;
border : none;
}
/*****
* .titleTable: the table containing the title bar
*****/
.titleTable {
width : 90%;
}
/*****
* .menuTable: the table containing the drop-down menus
*****/
.menuTable {
margin : 0 0 0 5%;
}
/*****
* .menuLi: text-color in list items of the drop-down menus
*****/
.menuLi {
color : black;
}
/*****
* .mainTable: the table containing the main content of WIKINDX
*****/
.mainTable {
border : none;
width : 90%;
padding : 0.2em;
clear : both;
}
/*****
* redefine HTML headings - see /core/html/MISC.php
*****/
h1, h2, h3, h4 {
color : #f6eedf;
margin : 0 0 1em 0;
}
/*****
* .footerFooter: footer information at end of script - part of a table
*****/
.footerTable {
font-size : 0.6em;
color : #f6eedf;
width : 90%;
}
/*****
* .error: <p>error messages</p>
*****/
.error {
background : red;
color : black;
}
/*****
* .success: <p>success messages</p>
*****/
.success {
background : #33ff00;
color : black;
}
/*****
* .small: small text
*****/
.small, .hint {
font-size : 0.8em;
}
/*****
* .hint: text hints given to provide further information usually on form input. Often used in conjunction
* with .small and usually the class of <span>....</span>
*****/
.hint {
color : #f6eedf;
}
/*****
* alternate background colours and font sizes for <td>resources</td> in a bibliographic list
*****/
.alternate1 {
/* background : #efd197; */
/* background : #f8efdf; */
border : 2px groove #583b04;
font-size : 0.9em;
color : #f6eedf;
}
.alternate2 {
/* background : #ede5d8; */
/* background : #f6eedf; */
border : 2px groove #583b04;
font-size : 0.9em;
color : #f6eedf;
}
/*****
* .highlight: highlight <span>search terms</span> in text
*****/
.highlight {
color : #583b04;
background : yellow;
}
/*****
* .required: highlighting for <span>required</span> form input elements (asterisk).
*****/
.required {
color : red;
}
I have been developing some dropdown menus loosely based on Patrick Griffiths "Suckerfish" example (see http://www.alistapart.com/articles/dropdowns/) and I have a prototype mostly working. The code is simple and is included in full below. However I see two problems with this that I can't sort out. First, in IE (6.0.2800) the dropdown is offset significantly from the left edge of the upper menu cell. In Mozilla (1.7.5) it's fine. I can't figure out why -- any ideas? I want it right underneath, not offset. Also, in Mozilla the dropdowns have a 1-pixel space at the right edge between the background and the border. Also a mystery ... Thanks for any comments / thoughts. Tom ======================================================== Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
font-family: arial, helvetica, serif;
background: white url(images/ddbg3.gif) no-repeat 6000px 6000px;
margin-left: 1em;
}
.mainlist {
list-style: none;
padding: 0;
margin: 0;
}
.mainitem {
float: left;
position: relative;
width: 120px;
text-align: center;
cursor: hand;
padding: 0;
border-top: 1px solid green;
border-left: 1px solid green;
border-bottom: 1px solid green;
}
.mainitem a {
font-weight: bold;
color: green;
text-decoration: none;
}
.mainitemlast {
border-right: 1px solid green;
}
.mainlist li:hover ul {
display: block;
left: 0;
}
li.over ul {
display: block;
left: 0;
}
.sublist {
display: none;
position: absolute;
float: left;
top: auto;
font-weight: normal;
background-color: #CCCCFF;
width: 150px;
padding: 0;
}
.subitem {
display: block;
float: left;
position: relative;
left: 0;
width: 100%;
border-top: 1px solid blue;
border-left: 1px solid blue;
border-right: 1px solid blue;
}
.subitemlast {
border-bottom: 1px solid blue;
}
.subitem a {
display: block;
font-weight: normal;
color: #060;
padding: 5px;
}
.subitem a:hover {
background-color: #EEEEFF;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
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>
</head>
<body>
<div id="content">
<br>
<ul class="mainlist" id="nav">
<li class="mainitem">
<div><a href="">Option 1</a></div>
<ul class="sublist">
<li class="subitem"><a href="">Subitem 1</a></li>
<li class="subitem"><a href="">Subitem 2</a></li>
<li class="subitem"><a href="">Subitem 3 is longer</a></li>
<li class="subitem subitemlast"><a href="">Subitem 4</a></li>
</ul>
</li>
<li class="mainitem">
<div><a href="">Option 2</a></div>
<ul class="sublist">
<li class="subitem"><a href="">Subitem 1</a></li>
<li class="subitem"><a href="">Subitem 2</a></li>
<li class="subitem"><a href="">Subitem 3 is longer</a></li>
<li class="subitem subitemlast"><a href="">Subitem 4</a></li>
</ul>
</li>
<li class="mainitem mainitemlast">
<div><a href="">Option 3</a></div>
<ul class="sublist">
<li class="subitem"><a href="">Subitem 1</a></li>
<li class="subitem"><a href="">Subitem 2</a></li>
<li class="subitem"><a href="">Subitem 3 is longer</a></li>
<li class="subitem subitemlast"><a href="">Subitem 4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Hi. I'm trying to create a dropdown menu using some code from son-of-Suckerfish. It's simple enough in concept - just a few lines of Javascript <!-- SON OF SUCKERFISH DROP DOWN MENU --> <script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script> </head> <body> <!-- Open Wrapper --> <div id="wrapper"> <!-- Open Header --> <div id="header"> </div> <!-- Close Header --> <!-- Open Menubar --> <div id="menubar"> <ul id="nav"> <li id="home"><a href="../home">Home</a></li> <li id="aboutus"><a href="../aboutus">About Us</a> <ul> <li id="aboutus2"><a href="#meetthestaff">Meet the Staff</a></li> <li id="aboutus2"><a href="#healthyeating">Healthy Eating</a></li> <li id="aboutus2"><a href="#ourcharity">Our Charity</a></li> </ul> </li> <li id="daynursery"><a href="../daynursery">Day Nursery</a> <ul> <li id="daynursery2"><a href="#dormice">Dormice & Hedgehogs</a></li> <li id="daynursery2"><a href="#sensory">Sensory Room</a></li> <li id="daynursery2"><a href="#activity">Activity Room</a></li> <li id="daynursery2"><a href="#outdoor">Outdoor Area</a></li> </ul> </li> <li id="preschool"><a href="../preschool">Pre-School</a> <ul> <li id="preschool2"><a href="#rabbits">Rabbits & Squirrels</a></li> <li id="preschool2"><a href="#montessori">Montessori Room</a></li> </ul> </li> <li id="parents"><a href="../parents">Parents</a> <ul> <li id="parents2"><a href="#news">News and Events</a></li> <li id="parents2"><a href="#parentspartnership">Parents in Partnership committee</a></li> <li id="parents2"><a href="#testimonials">Testimonials / references</a></li> <li id="parents2"><a href="#ofsted">Ofsted</a></li> <li id="parents2"><a href="#swapshop">Swap Shop</a></li> </ul> </li> <li id="contact"><a href="../contact">Contact</a> <ul> <li id="contact2"><a href="#findus">How to Find Us</a></li> <li id="contact2"><a href="">Our Prospectus</a></li> </ul> </li> </ul> </div> CSS code is: @charset "utf-8"; /* Design by Creative Media Heroes littleowlsnursery/devsite */ * { padding: 0; margin: 0; } body { font-family: Verdana, Arial, sans-serif; font-size: 11px; margin: 0; padding: 0; color: black; } .nurserycol { color:#000;} .preschoolcol { color:#000;} .parentscol { color:#000;} #wrapper, #header, #menubar {width: 775px; margin: 0; padding: 0;} /*#wrapper, #header, #infobar, #menubar, #menubar2, #optionbox, #sidebar, { display:inline;}*/ #header, #infobar, #menubar, #content{ float: left; } #wrapper { border: 1px solid #FF3300; border-top: none; border-bottom: none; background-color: white; margin: 0 auto; } #header { height: 274px; background:url(../images/lon-head-temp.jpg) no-repeat; } #content { clear: both; width: 650px; margin: 0 0 0 0; padding: 15px 0 15px 0; min-height: 400px; /*border-right: 1px solid #CCC;*/ } #sidebar { float: right; margin: 0px 0px 5px 0px; padding: 0px; height: 335px; width: 120px; background: #E7DBD5; } #rightcolumn { float: right; color: #333; margin: 15px 0 0 0; padding: 0; width: 120px; display: inline; /*height: 480px; background: #E7DBD5;*/ } img.left { float: left; } img.right { float: right; } /* Dropdown menu*/ #nav { float: left; width: 775px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; list-style: none; line-height: 17px; clear: both;} #nav li { height: 50px; } #nav li a { float: left; ; height: 0; padding-top: 50px; overflow: hidden; } /*#menubar ul, #menubar ul a { background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; }*/ #nav ul { float: left; padding: 0; margin: 0; list-style: none; line-height: 17px; color: white; } #nav a { display: block; width: 105px; list-style-type: none; } #nav li { float: left; width: 105px; color: white; line-height: 17px; } #nav li ul { position: absolute; color: white; width: 105px; left: -999em; line-height: 17px; } #nav li:hover ul, #nav li:hover ul a, #nav li.sfhover ul { /*float: left;*/ left: auto; color: white; line-height: 17px; margin-top: 50px; } /* BUTTONS */ #nav li#home{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: 0 0px; } #nav li#aboutus{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -105px 0px; } #nav li#daynursery{ width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -210px 0px; } #nav li#preschool{ width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -335px 0px; } #nav li#parents{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -460px 0px; } #nav li#contact{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -565px 0px;} /* ON STATES */ #nav li#home a:hover { width: 105px; background-image: url(../images/lonmenu.gif); background-position: 0 -50px; } #nav li#aboutus a:hover { width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -105px -50px; } #nav li#daynursery a:hover { width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -210px -50px; } #nav li#preschool a:hover { width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -335px -50px; } #nav li#parents a:hover { width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -460px -50px; } #nav li#contact a:hover { width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -565px -50px;} #nav li#home2 { width: 105px; height: 17px; display: block; background:#0099FF;} #nav li#aboutus2 { width: 105px; height: 17px; display: block; background:#6FAADF;} #nav li#daynursery2 { width: 125px; height: 17px; display: block; background:#AC2282;} #nav li#preschool2 { width: 125px; height: 17px; display: block; background:#E74C15;} #nav li#parents2 { width: 105px; height: 17px; display: block; background:#0F549D;} #nav li#contact2 { width: 105px; height: 17px; display: block; background:#D4B2A1;} #nav li#daynursery2 :hover { width: 125px; height: 17px; display: block; background:#D4B2A1;} [if lte IE 6]> <style type=text/css"> div.nav a:hover {visibility:visible;} </style> [endif] /* Footer bar*/ .footer { float: left; clear: both; width: 775px; margin: 5px auto; padding: 0; display: inline; color: #999999;} .footer a { border: none; color: #88746a; text-decoration: none; font-size: 9px; } .footer ul { margin: 0; padding: 3px 0 3px 0; list-style: none; } .footer li { display: inline; } .footer ul a { float: left; padding: 1px 10px; border-left: solid 1px #95a2c0; color: #88746a; text-decoration: none; font-size: 9px; } .footer a:hover { color:#400000; text-decoration: none; } The CSS code is a bit jumbled because I've been trying all I can to fix the problems I'm getting. Basically I have a single-graphic hover menu which works fine, but then the drop-down menus (in their separate colours) are just not coming in underneath in IE7 - ok in Firefox on pc and mac, plus fine is Safari on mac - but they should be normal wording links as 11px text with 17px line-height. I am getting the single-graphic coming in instead. I know this must have something to do with the nested ul in the li, but just can't stop this happening. So, it's really a 2 stage HELP. PLEASE!!!! Oh, I know I can't put a url link in. It's basically in a devsite folder of the main site I'm talking about here! hey all, I have been working on a multilevel suckerfish menu tutorial and i have the following: http://www.wildhosting.co.uk/cssMenu/menu.php However, i am having a couple of final problems. 1) In FF the grey highlight colour does not seem to fill from top to bottom on the main menu. 2) In FF, When a sub menu (for the top option of the menu) appears the top border of the submenu overlaps the bottom border of the main menu. 3) In IE, the above are ok but the submenu appears a long way from where it should, ie 5cm to the right... any help would be great, thanks RF Hello. I'm trying to create a CSS/SPRY dropdown menu. It seems to work fine in Firefox but in IE 6 the dropdown goes horizontal until I mouse over then it goes verticle. Also how do I add black 1px border around each list item in the dropdown menu? I have tried but it tends to give the first Menu Item the border as well which doesnt work so well with the layout. Here is the temp site. http://www.nessphysiotherapy.com/tempmenuhelp.html Quote: @charset "UTF-8"; /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, an auto width box with no margin or padding */ ul.MenuBarHorizontal { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: auto; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive { z-index: 1000; } /* Menu item containers, position children relative to this container and are a fixed width */ ul.MenuBarHorizontal li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: auto; float: left; white-space: nowrap; } /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul { margin: 0; padding: 0; list-style-type: none; z-index: 1020; cursor: default; width: auto; position: absolute; left: -1000em; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible { left: auto; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li { float: none; background-color: transparent; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul { position: absolute; margin: -5% 0 0 95%; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible { left: auto; top: 0; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers have borders on all sides */ ul.MenuBarHorizontal ul { background: #781844; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a { display: block; cursor: pointer; color: #FFFFFF; text-decoration: none; font-family: Tahoma, "Times New Roman", Serif, Arial; font-weight: bold; font-size: 0.9em; line-height: 0.98em; padding-top: .9em; padding-right: 1.1em; padding-bottom: 1em; padding-left: 1.1em; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus { color: #99CCCC; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible { color: #99CCCC; } /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenu { background-image: url(SpryMenuBarDown.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenu { background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarDownHover.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; } /******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ ul.MenuBarHorizontal iframe { position: absolute; z-index: 1010; } /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ @media screen, projection { ul.MenuBarHorizontal li.MenuBarItemIE { display: inline; f\loat: left; background: transparent; } } Can anyone give me a hint on why the css/javascript controlled dropdowns don't appear right on this page in Safari: http://spa.american.edu As you can see in the view source the script is very basic and not embedded in an external file. Safari cuts off a portion of the final link. Thanks, Jeremy I'm trying to update my main navigation bar for my site into a something a bit more useful and clean. I've gotten it to work pretty much exactly as I want to in FF and Opera, but of course it's displaying very wrong in IE. I thought I had found the code needed to fix IE, but I've either used it incorrectly, or it's just not the right bit of code. Here's a page with the navbar live: http://www.skullcrow.com/community_upload.php Here's the css being used: Code: /* horizontal drop down navbar - basic formatting */
#centering_wrap {width:100%; position:relative;}
#menu {margin:0 auto;width: 955px;font: bold 11px/16px arial, helvetica, sans-serif;color:#666;} /* Main width and default font properties */
#menu ul {list-style: none;margin: 0;padding: 0;float: left; line-height:42px;} /* Main format for top categories */
#menu ul ul{ position:relative; top:35px; left:5%; width: 90%;} /* child element widths */
#menu ul li{ background-position:bottom left;} /* set nav bg position */
#menu ul li:hover{ background-position:top left;} /* set nav bg position hover position */
/* Positioning popouts (2nd level only) */
#menu li {position: relative;} /* make "ABSOLUTE" work correctly */
#menu ul ul {position: absolute; z-index: 500;} /* prevent menu from "pushing" contents down */
#menu ul ul ul {position: absolute; top: 0; left: 100%;} /* move child elements to the side */
/* Hover behavior */
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
/* Additional text formatting */
#menu a {display: block;width: 100%;height: 100%;}
#menu ul ul li {
font: bold 11px/16px arial, helvetica, sans-serif;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #ccc #323E6B #456594 #323E6B ;
margin: 0;
padding: 3px 4px;
background: #2B3344;
}
#menu ul ul a {color: #CCC;text-decoration: none;}
#menu ul ul a:hover {color: #FFF;background:#06F;}
...and here's the html from the menubar (which is contained in a separate php.includes, if that matters at all): Code: <div id="centering_wrap">
<div id="menu">
<ul style="width:195px;">
<li style="background-image:url(../images/nav_com_home.png);"><a href="http://www.skullcrow.com/" alt="Home"> </a>
<ul>
<li><a href="http://www.skullcrow.com/">Storefront</a></li>
<li><a href="http://www.skullcrow.com/community_home.php">Community</a></li>
</ul>
</li>
</ul>
<ul style="width:188px;">
<li style="background-image:url(../images/nav_com_store.png);"><a href="http://www.skullcrow.com/" alt="Store"> </a>
<ul>
<li><a href="http://www.skullcrow.com/">Shirts</a></li>
<li>Hats</li>
<li>Stickers</li>
<li>Misc Stuff</li>
</ul>
</li>
</ul>
<ul style="width:188px;">
<li style="background-image:url(../images/nav_com_community.png);"><a href="http://www.skullcrow.com/community_home.php" alt="Community"> </a>
<ul>
<li><a href="http://www.skullcrow.com/forum">Forum</a></li>
<li><a href="http://www.skullcrow.com/community_upload.php">Upload Photos</a></li>
<li><a href="http://www.skullcrow.com/community_designers.php">Submit Shirt Designs</a></li>
<li><a href="http://www.skullcrow.com/skullcrow_blog">SkullCrow Blog</a></li>
</ul>
</li>
</ul>
<ul style="width:188px;">
<li style="background-image:url(../images/nav_com_help.png);"><a href="http://www.skullcrow.com/help.php" alt="Help"> </a>
<ul>
<li><a href="http://www.skullcrow.com/help.php">Contact Us</a></li>
<li><a href="http://www.skullcrow.com/forum/faq.php">FAQ</a></li>
<li><a href="http://www.skullcrow.com/aboutus.php">About Us</a></li>
</ul>
</li>
</ul>
<ul style="width:196px;">
<li style="background-image:url(../images/nav_com_otherstuff.png);"><a href="#" alt="Other Stuff"> </a></li>
</ul>
</div>
</div>
...and finally, here's the small snippet of code I used up in the header of the main php file that I thought was suppose to fix the display issue but didn't: Code: <!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(css/csshover3.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
That last bit is contained at the very of the header, and is the very last item before the </head> tag. In addition to the other 'adjustments', it's also suppose to be including the csshover3.htc file that I thought was suppose to fix a lot of display problems. The site I got that file from is he http://www.xs4all.nl/~peterned/csshover.html Whatever help is always very appreciated. I'm still sort of a css newb, although I think I'm starting to understand more, but IE is a bastard and I think most web developers would probably agree. Thanks again. i am trying to use the suckerfish dropdown menu. starting from the pretty example, i got it going in IE6 but it looked pretty off in mozilla. i tinkered around further the the IE code which changed things a bit there and made things look a bit better in mozilla but not much! my code is at http://www.fizzycherry.com/menutest.html - i would *really* appeciate any ideas. the main things really bugging me a how can i get the menu bar to fill the width of the screen in mozilla? my navbar div did this before i inserted the sub menus! once i tinkered with my css, placing padding on the links rather than the li elements, huge vertical gaps started appearing in the submenus in both IE and Mozilla, even with no margins padding and borders. i need to *add* a bottom border (same colour as background) to remove these gaps! why?? ideally i would like the submenus to look somethign like they do in ie6 but even if someone could just tell me how to make the bar fill the screen i'd be chuffed! it's best to get a visual of this one: www.viportals.com i'm talking about the buttons under the top banner. if you hover "Games", a drop down list appears. there is a 1pixel line between the "Games" button and its dropdown list (when you hover the "Games" button) which i want to get rid of, but can't. in IE, there are many horrible problems, probably due to the display:inline-block of the li a. the buttons are too tall and hang down below the bottom line of the horizontal bar, and the dropdown menu appears beside the "Games" button. i tried css Code: Original - css Code #sddm ul li a { padding-top: 0; padding-bottom: 0; margin-top:0; margin-bottom:0; }
#sddm ul li a {
in my separate ie css file, but its the same here is all the code if you need it to gain a better understanding (css, html, and js). css Code: Original - css Code /* DROP-DOWN NAVIGATION MENU */ #sddm { margin: 0; padding: 0; z-index: 30; } #sddm li { margin: 0; padding: 0; list-style: none; float: left; } #sddm li a { display: inline-block; text-decoration: none; color:#495B20; background-color:#BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li a:hover { background-color:#495B20; color:#BAD36B; border-left: 2px solid #000; border-top: 2px solid #000; border-right: 2px solid #fff; border-bottom: 2px solid #fff; text-decoration:none; } #sddm li:hover div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li div:hover { background-color:#495B20; color:#BAD36B; border-left: 2px solid #000; border-top: 2px solid #000; border-right: 2px solid #fff; border-bottom: 2px solid #fff; } #sddm li div:hover a{ background: #495B20; color: #BAD36B; } #sddm li div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; border:none; font: 11px arial; } #sddm li div a:hover { text-shadow:#000; text-decoration:underline; border:none; } /* DROP-DOWN NAVIGATION MENU */ html Code: Original - html Code <div id='navbar'> <ul id="sddm"> <?php echo " <li> <a href='".get_home_link()."'> Home</a> </li> <li> <a href='".get_category_link("name=all&page=1")."'"; ?> onmouseover='mopen("m1")' <?php echo " onmouseout='mclosetime()'> Games</a> <div id='m1' onmouseover='mcancelclosetime()' onmouseout='mclosetime()'> "; $categories = get_categories("htmlize=true&order=order&sort=ASC"); foreach ($categories as $category) { $link=get_category_link("name="._sp($category['name'])."&page=1"); echo "<a href='".$link."'>".$category['name']; $category['gamenum'] = count(get_games("thecat="._sp($category['name']))); echo " (".$category['gamenum'].")"; echo "</a>"; } echo " </div> </li> <li> <a href='".get_users_link()."'> Members</a> </li> <li> <a href='".get_news_link()."'> News</a> </li> <li> <a href='".get_submit_link()."'> Submit</a> </li> <li> <a href='".get_links_link()."'> Links</a> </li> <li> <a href='".get_rules_link()."'> Rules</a> </li> <li> <a href='".get_faq_link()."'> FAQ</a> </li> <li> <a href='".get_contact_link()."'> Contact</a> </li>"; ?> </ul> <div style="clear:both"></div> </div>
<div id='navbar'>
<ul id="sddm">
<?php
echo "
<li>
<a href='".get_home_link()."'>
Home</a>
</li>
<li>
<a href='".get_category_link("name=all&page=1")."'";
?>
onmouseover='mopen("m1")' <?php echo "
onmouseout='mclosetime()'>
Games</a>
<div id='m1'
onmouseover='mcancelclosetime()'
onmouseout='mclosetime()'>
";
$categories = get_categories("htmlize=true&order=order&sort=ASC");
foreach ($categories as $category) {
$link=get_category_link("name="._sp($category['name'])."&page=1");
echo "<a href='".$link."'>".$category['name'];
$category['gamenum'] = count(get_games("thecat="._sp($category['name'])));
echo " (".$category['gamenum'].")";
echo "</a>";
}
echo "
</div>
</li>
<li>
<a href='".get_users_link()."'>
Members</a>
</li>
<li>
<a href='".get_news_link()."'>
News</a>
</li>
<li>
<a href='".get_submit_link()."'>
Submit</a>
</li>
<li>
<a href='".get_links_link()."'>
Links</a>
</li>
<li>
<a href='".get_rules_link()."'>
Rules</a>
</li>
<li>
<a href='".get_faq_link()."'>
FAQ</a>
</li>
<li>
<a href='".get_contact_link()."'>
Contact</a>
</li>";
?>
</ul>
<div style="clear:both"></div>
</div>
Hi, Can anyone help me. I am using a son of suckerfish dropdown menu on a joomla 1.5 site I am working on. laminatefabricators.com The menu is dropping down fine on all of my browsers (apple mac: safari, camino, firefox). & are fine on firefox for pc. The menus aren't displaying at all on Internet explorer. Please help... I have wasted so much time trying to fix it/find a fix. Hi everyone, So I'm implementing the suckerfish dropdown into one of my sites. I'm having a bit of trouble getting something to work correctly. I did most of the grunt work on getting it customized, but I was hoping someone could help me figure out a few minor details. The version of the drop down I had to make has images for the top level (main level) of the navigation, and each image is a unique size. In doing so, as well as adding padding to the second level li for aesthetic purposes, in IE the menu doesn't drop but floats over to the right. I'm not sure why this is. Also, I know this may be more fit for the JavaScript area, and I'll repost there if necessary, but I'd like to keep the top level image in the "over" state while the cursor is on that 2nd level dropdown. Is that possible? I'll be anxious for your feedback, this has been driving me crazy all day. Here's the code. XHTML: Code: <div id="nav"> <ul> <li class="one"><a href="#"><img src="images/home.gif" /></a></li> <li class="two"><a href="#" onmouseover="document.two.src='images/nav-our_products_on.gif';" onmouseout="document.two.src='images/nav-our_products_off.gif';"><img name="two" src="images/nav-our_products_off.gif" /></a> <ul> <li><a href="#">sublink 1</li></a> <li><a href="#">sublink 2</li></a> </ul> </li> </ul> </div> CSS Code:
#nav {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #67670f;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li.one {
float: left;
margin: 0;
padding: 0;
width: 51px;
list-style: none;
}
#nav ul li.one img {
border: 0;
}
#nav ul li.two {
float: left;
margin: 0;
padding: 0;
width: 118px;
list-style: none;
position: relative;
}
#nav ul li.two img {
border: 0;
}
/* - begin level 2 - */
#nav ul li ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
left: -999em;
border: solid 1px #ddd;
width: 118px;
voice-family: "\"}\"";
voice-family:inherit;
width: 116px;
}
#nav ul li ul li a {
display: block;
padding: 3px 0 3px 3px;
margin: 0;
color: #67670f;
text-decoration: none;
width: 118px;
voice-family: "\"}\"";
voice-family:inherit;
width: 113px;
}
#nav ul li.two ul li a:hover {
color: #52432c;
background-color: #e4e2db;
text-decoration: none;
}
#nav ul li:hover ul, #nav ul li.sfhover ul {
left: auto;
}
JavaScript Code:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
It seems that in IE something isn't being cleared, as it almost appears that the second level is in place directly next to the top level link that is activating the dropdown menu. I look forward to your insight! Thanks! -Brian I have been trying to get Son of Suckerfish dropdown menus to work in IE for me for the longest time... I just can't get it to align how I want it to when I add my own "tab" effect. Code: <ul id="nav"> <li id="main1" class="mainMenu"><a href="./index.php">Home</a></li> <li id="main2" class="mainMenu"><a href="./about.php">About Us</a></li> <li id="main3" class="mainMenu"><a href="./calendar.php">Calendar</a></li> <li id="main4" class="mainMenu"><a href="./college.php">College Students</a> <ul> <li><a href="./studentNews.php">News</a></li> <li><a href="./studentLeaders.php">Student Leaders</a></li> <li><a href="./sundaySupper.php">Sunday Supper</a></li> <li><a href="./serventEvents.php">Servant Events</a></li> <li><a href="./gallery2/main.php?g2_itemId=40">Fall Retreat</a></li> </ul> </li> <li id="main5" class="mainMenu"><a href="./family.php">Family Ministry</a> <ul> <li><a href="./family.php">Overview</a></li> <li><a href="./fmSchedule.php">Schedule</a></li> <li><a href="./fmActivities.php">Activities</a></li> <li><a href="./gallery2/main.php?g2_itemId=53">Photos</a></li> <li><a href="./fmYouCanHelp.php">You Can Help</a></li> <li><a href="./fmCoordination.php">Education Coordination Team</a></li> </ul> </li> <li id="main6" class="mainMenu"><a href="./serving.php">Ways to Serve</a></li> <li id="main7" class="mainMenu"><a href="./giving.php">Ways to Give</a> <ul> <li><a href="./giving.php">Financial Home</a></li> <li><a href="https://www.eservicepayments.com/cgi-bin/specialwebapp.vps?appid=40a27221f816144b21e9f2e0d81891b8a68820b814b79fc6caf83c6a4fcf06b22f288aa4a34f a442a76b20a4eb1041b012267f0823e0ef99aeca1bf9c914f523">Make A Gift Online</a></li> <li><a href="./eft.php">Electronic Fund Transfer</a></li> <li><a href="./matching.php">Matching Gifts</a></li> <li><a href="./meijer.php">Meijer Community Rewards</a></li> <li><a href="./givingTools.php">Tools for Giving</a></li> <li><a href="./endowment.php">Endowment Fund</a></li> </ul> </li> <li id="main8" class="mainMenu"><a href="./contact.php">Contact Us</a></li> </ul> That's the HTML Code: #nav {
float: left;
list-style: none;
line-height: 1;
font-size: 16px;
padding: 0;
margin: 0 0 0.5em 0.6em;
}
#nav ul {
list-style: none;
background: #006600;
padding: 0;
border: 1px solid #000;
}
#nav li.sfhover ul {
left: 1em;
}
#nav a {
display: block;
color: white;
text-decoration: none;
padding: 0.25em;
padding-right:0;
}
#nav ul a {
display: block;
width: 6em;
color: white;
text-decoration: none;
background:none;
border:none;
}
#nav li {
float: left;
padding: 0;
width: 7em;
height:auto;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 13.9em;
font-weight: normal;
border: 1px solid #000;
}
#nav li li {
padding-right: 1em;
width: 13em;
}
#nav li ul a {
width: 12em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav ul li:hover, #nav li:hover, #nav ul li.sfhover, #nav li.sfhover {
background: #009900;
}
/* Width of the tabs */
#nav #main1 {
width:3.4em;
}
#nav #main2 {
width:4.6em;
}
#nav #main3 {
width: 4.5em;
}
#nav #main4 {
width:7.85em;
}
#nav #main5 {
width:7em;
}
#nav #main6 {
width:6.8em;
}
#nav #main7 {
width:6.3em;
}
#nav #main8 {
width:5.5em;
}
#nav li {
margin-right: 3px;
border: 1px solid #000;
background: #006600;
color: white;
text-decoration:none;
}
#nav li ul li {
border:none;
background: #006600;
color: white;
text-decoration:none;
}
#nav li ul {
border: 1px solid black;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
And that's the CSS Just in case this will help, here's a link to a test page (just throw together so There is no content other than the menu) http://www.martinlutherchapel.org/test.html I've messed with this for a couple days now. I can't seem to get it to do what I need it to. Any help would be much appreciated I need to add a 3rd column to the menu My code between the body and /body tags I marked the place I need the 3rd column with: *** ( Need to add a 3rd column for the filters ) *** Code: <ul id="nav"> <li><a href="#">Home</a> </li> <li><a href="#">Maps</a> </li> <li><a href="history.php">History</a> </li> <li><a href="#">Contractors We Recommend</a> </li> <li><a href="#">Products We Recommend</a> <ul> <li><a href="#">Pool Accessories</a> <ul> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> </ul> </li> <li><a href="#">Pool Chemicals</a> <ul> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> </ul> </li> <li><a href="#">Pool Filters</a> <ul> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> </ul> </li> *** ( Need to add a 3rd column for the filters ) *** <li><a href="#">Pool Heaters</a> <ul> <li><a href="#">Hayward</a></li> <li><a href="#">Pentair</a></li> <li><a href="#">Sta-Rite</a></li> </ul> </li> <li><a href="#">Pool Motors</a> <ul> <li><a href="#">Pool Motors</a></li> </ul> </li> <li><a href="#">Pool Sweeps</a> <ul> <li><a href="#">Hayward</a></li> <li><a href="#">Pentair</a></li> <li><a href="#">Sta-Rite</a></li> </ul> </li> <div id="content"> </div> Thanks for any help! |
|||||||