|
CSS - Suckerfish Dropdown Quirk
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>
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! 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... 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 There's some really strange bug that only happens in Safari If you visit this, and click on any of the links in the left column or even the link to the page itself then the main content of the page get's shifted down. It doesn't make any sense, the document is exactly the same. Could someone enlighten me? Thank you! Scenario: I have an MS-Access application that uses a webbrowser control to display help. WebBrowser is IE. Suddenly the titles on my index page went missing ... no not missing. If I scrolled down and then scrolled back up they rendered. Sometimes rendering only partially (the bottom half of the words "Help Index" missing, top half rendered). The behavior replicated in the IE browser. Firefox and W3C meanwhile both indicated everything was groovy. Here was the context: Code: HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xml:lang="en" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Diverse Leader Program Database Help System: Index</title> <link href="css/dlpd0.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="tpage"> <div class="idxbar"><a href="index.html">Help Index</a></div> <div class="dlpdtitle">Diverse Leader Program Database</div> <div class="dlpdsubtitle">Help Index</div> etc. Odd. What's more the page was nearly identical to the dozens of other pages in the same help system. The css was innocent enough Code: CSS
.dlpdtitle {
background:#ffffff;
font-weight: bold;
font-size: 16px;
font-family: Arial, Helvetica, Sans-Serif;
color:#012345;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
Four hours later ... The culprit was this: Code: HTML <a name="userdoc"></a><hr /> Everything reverted to placid normalcy with just this: Code: HTML <a name="userdoc"></a> <br /><hr /> So ... there you have the results of my investigation into this very bizarre quirk that probably none of you will ever encounter. But if you do ... now you know ;-) I think it's time for my lunch break now ... 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. I built a custom Suckerfish CSS dropdown nav, with a portion of the code for which is below: Code:
#nav {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #67670f;
text-align: left;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li.navsep {
float: left;
width: 2px;
}
li.home {
float: left;
position: relative;
width: 61px;
}
li.home img {
border: 0;
}
li.ourproducts {
float: left;
position: relative;
width: 132px;
z-index: 500;
}
li.ourproducts img {
border: 0;
}
li.ourproducts ul {
display: none;
position: absolute;
top: 0;
left: 0;
width: 132px;
background-color: #fff;
}
li.ourproducts ul a, li.ourproducts ul a:visited {
display: block;
padding: 3px 0 3px 3px;
margin: 0;
color: #67670f;
text-decoration: none;
width: 129px;
}
li.ourproducts ul a:hover {
display: block;
background-color: #e4e2db;
color: #67670f;
text-decoration: none;
}
The focus is on the li.ourproducts a, li.ourproducts a:visited declaration. In IE6, the background on :hover is 3 pixels shy of covering the whole list item. I know this must have something to do with the padding. FF however, renders it fine. I figured that IE6 would handle the box model fine. When I make the width 132px however for li.ourproducts a, li.ourproducts a:visited, in IE6 it's fine and in FF it's 3 pixels farther than it should be (135px). Can anyone hint at what the problem might be? I can't seem to get the declaration so both see it fine. -B Hi, Sorry to bother you all but I seem to have run into an awkward problem and I would be extremely greatful if anyone could help me. www.duncansweetland.com/development/menu_problem/menu_problem.html I am attempting to code up a design generated by an individual and he is very specific that no sizes are to be changed in his precious design. The navigation uses son of suckerfish menu (3 levels) with the second and third levels launching to the right of the previous column - somewhat strangely! The nav elements consisting of font-size: 11px and a line-height: 12px and a 1px gap between each element - which as you can imagine is quite small (too small in my opinion but he won't change it!) And while firefox has no problems navigating back through the nested lists, internet explorer is going insane - with sub-menu's dissappearing as you scroll down through them or as you try to launch them, making the whole thing completely un-navigable. I produced a bigger version : font-size: 12px and a line-height: 20px and a 1px gap between each element - which was stable in both I.E and Firefox as a soloution - but he was insistant that these sizes are way too big and that the sizes should remain as he set them. If anyone could provide me with a soloution / tell me where I am going wrong or suggest any alternative methods that would facilitate the same conclusion I would be truly delighted to hear from you - please get in touch even if it is just to tell me it's unfixable and a new soloution needs to be found. Thanks in advance, Duncan Sweetland So I tried this popular drop-down menu technique and is all good except that the second-level menu links line up beside the top-level headers in IE6 instead of, well, dropping down (which thankfully does happen in FF). This would be very confusing for visitors trying to navigate! I have seen this problem described on forums and blogs but not found a solution. The example page at HTML Dog displays properly in IE6, which offers no insights . . . See the page in question: hire.karenjeane.com/web/site2.php Thanks for any help! 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! Hi all This is the place I need help with http://www.simon.rochester.edu/source%20files/newpage/web5/ at the white navigation bar on the top, the dropdown is aligned to the top right corner rather than bottom left. I looked up suckerfish page and found out that's what IE does, so I added the fix: top:100%; left:0; to #topnav li ul However, nothing happens. I tried a slew of other things, nothing seems to change that bit. Can anyone help? Also if you notice, the white bar navigations are images, those images get compressed for some damn reason in IE. Mozilla doesn't have any of these problems. I implemented IE7 patch as well 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 am trying to get my suckerfish dropdown menu to be centered on the page regardless of the resolution of the monitor. I know this is possible, but I just can't wrap my head around it. This is what I have so far: Code: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title><?php echo $title_page; ?></title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="site_files/style/web.css" /> <link rel="Shortcut Icon" href="site_files/pictures/favicon.ico" /> <script type="text/javascript" src="site_files/ie_drop.js"></script> </head> <body> <div id="header"> <p>NAVPACMETOCCEN San Diego Operational Home Page</p> </div> <div id="info"> <p>This page will be down at 1100 GMT on 20 June 2005. Click <a href="site_files/php/status.html">here</a> for more information.</p> </div> <div id="menu"> <ul id="nav"> <li><a href="index.php">Home Page</a></li> <li>Support <ul> <li><a href="site_files/php/a.html">Ship Specific</a></li> <li><a href="site_files/php/a.html">Unit Specific</a></li> <li><a href="site_files/php/a.html">Detachment</a></li> <li><a href="site_files/php/a.html">Mobile Env. Team</a></li> <li><a href="site_files/php/a.html">Coast Guard</a></li> </ul> </li> <li>Satellite <ul> <li><a href="site_files/php/a.html">Infrared</a></li> <li><a href="site_files/php/a.html">Visual</a></li> <li><a href="site_files/php/a.html">Water Vapor</a></li> <li><a href="site_files/php/a.html">Lightning</a></li> <li><a href="site_files/php/a.html">Analysis</a></li> </ul> </li> <li>Products <ul> <li><a href="site_files/php/a.html">Warnings</a></li> <li><a href="site_files/php/a.html">Forecasts</a></li> </ul> </li> <li>Aviation <ul> <li><a href="site_files/php/a.html">Products</a></li> <li><a href="site_files/php/a.html">Contact Info.</a></li> <li><a href="site_files/php/a.html">OBS/TAFS</a></li> <li><a href="site_files/php/a.html">Aviation Links</a></li> </ul> </li> <li><a href="site_files/php/links.html">Links</a></li> </ul> </div> <div id="leftside"> <p class="leftmenu"><a href="http://www.navy.com">Navy Jobs</a></p> <p class="leftmenu"><a href="http://www.donhr.navy.mil/NoFearAct.asp">No Fear Act</a></p> <p class="leftmenu"><a href="http://www.navy.mil">U.S. Navy Website</a></p> <p class="leftmenu"><a href="html/privacy.html">Privacy Policy</a></p> <p class="leftmenu"><a href="site_files/disclaimer.html">DoD Disclaimer</a></p> </div> </body> </html> And here is the style sheet: Code:
/* This part tells us how the hyperlinks will be handled by the browsers, and also what the background will be */
a:link { /* This is the link standard color*/
color: #000000; /*black*/
}
a:visited { /* This is the color of an already visited link*/
color: #800080;/*purple*/
}
a:hover {/* This is the color your link will take when you move your mouse over it*/
color: #FF0000;/*red*/
text-decoration: none;
}
a:active {/* This is the color and effect when you physically click on the link*/
color: #008080; /*teal*/
}
a { /*This tells the browser not to underline any links */
text-decoration: none;
}
/* This begins the header and the information notice portion */
#header {
margin: -14px -8px 0px -8px;
padding: 10px;
height: auto;
background: #000060;
}
#header p {
margin: 0;
height: auto;
color: #FFFF1B;
text-align: center;
font: small-caps 24px verdana, san-serif, serif;
}
#info {
margin: -1px -8px 0px -8px;
padding: 1px;
height: auto;
}
#info p {
margin: 0;
height: auto;
color: #0000FF;
background: #FFFFFF;
text-align: center;
font: bold 12px arial, san-serif, serif;
}
/* This ends the header and the information notice portion */
/* This begins the Drop-down menu portion*/
#menu { /* Top-Right-Bottom-Left */
margin: 0 0 0 145px;
padding: 0;
width: auto;
font: small-caps bold 12px verdana, san-serif, serif;
}
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
li { /* all list items */
float: left;
position: relative;
width: 125px;
}
li ul { /* second-level lists */
display: none;
position: absolute;
top: 14px;
left: 0;
}
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;
}
/* This ends the drop-down menu portion */
/* This begins the left-side menu portion */
#leftside {
margin: 100px 0px 0px -8px;
width: 115px;
color: #000000;
font: small-caps 12px arial, san-serif, serif;
}
.leftmenu {
margin: 5px 0 2px 0;
height: 15px;
background: #DDEEFF;
}
#pkinotice {
margin: 0px 50px 0px 125px;
font: bold 12px arial, san-serif, serif;
}
.pki {
border: 2px solid #FF0000;
As you can see, I've just moved it over manually 145 px, and that centers it pretty well if you are viewing it at 1024x768, but at higher resolutions, the 145px is not sufficient for the centering. If anyone has an idea on how to fix it, I'd appreciate help. The solution must be able to validate, and work in both IE and a compliant browser (mozilla or firefox is what I use). Also, if the style sheet code can be cleaned up, or you see mistakes, don't hesitate to tell me. I've been learning CSS2.1 for about 3 months now, but I am not a whiz at it... I appreciate the help. Many thanks... Bryan If you are having problems with Son of Suckerfish and IE7, where the drop down menu will not disappear like it should. Take out the javascript because you do not need it with IE7, but if you still want IE6 to work then put it in. For IE7, you need to add Code: *:first-child+html #nav {
height: 1%;
}
*:first-child+html #nav li {
height: 1%;
}
to your css and you will be fine. Don't ask me why, Don't ask how, i just chalk it up to just IE I'm struggling with css on my joomla site. I'm trying to develop a dropdown that can have two levels to it. I've got something working with the following css but I have no idea what to change to line the menus up. Code: /* =======================================
Top Menu aka Main Menu
======================================= */
.moduletable_topmenu{
padding:0;
color: #333;
height: 30px;
margin: 0;
width: 500px;
font-size: 90%
}
.moduletable_topmenu h3 {
background:#666;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0;
}
.moduletable_topmenu ul{
list-style: none;
margin: 0;
padding: 0;
}
.moduletable_topmenu li{
margin: 0px 15px 0px 0px;
float: left;
}
.moduletable_topmenu li ul {
position: absolute;
width: 135px;
left: -999em;
border: 1px solid #474748;
border-bottom: none;
top: 22px;
}
.moduletable_topmenu li:hover ul {
left: auto;
}
.moduletable_topmenu li ul li {
width: 135px;
padding: 0;
border-bottom: 1px solid #474748;
}
.moduletable_topmenu li a{
display: block;
padding: 5px;
background-color:#fff;
color: #000;
font-weight: bold;
text-decoration: none;
}
html>body .moduletable_topmenu li a {
width: auto;
}
.moduletable_topmenu li ul li a {
width: 125px;
background-color: #221f20;
color: #fff;
/* ---
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;*/
}
.moduletable_topmenu li a:hover,a#active_menu:link,a#active_menu:visited{
color: #e22f00;
text-decoration: none;
/* ---
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;*/
}
.moduletable_topmenu li ul li a:hover {
background-color: #e22f00;
color: #fff;
background: url(../images/top_link_bg2_on.png) repeat-y top left;
}
.moduletable_topmenu li:hover ul, .moduletable_topmenu li.sfhover ul {
left: auto;
}
.moduletable_topmenu ul li.active a {
color: #038fd9;
text-decoration: none;
}
.moduletable_topmenu li.parent.active a {
color: #038fd9;
text-decoration: none;
}
.moduletable_topmenu li.parent.active a:hover {
color: #e22f00;
}
.moduletable_topmenu li.parent.active ul li a {
color: #fff;
text-decoration: none;
}
.moduletable_topmenu li.parent.active ul li a:hover {
color: #fff;
text-decoration: none;
}
I am currently using IE 7 and my test site is located at http://vcob.org/2008test if you want to see the menu in action go to that site and mouse over the "About Joomla" link in the menu across the top of the page. You should notice how the sub-menus stack on top of each other and I can't get them to line up. Any help would be so appreciated as I need to get this to work and I can't seem to get anyone at Joomla to help me, thanks in advance. |
|||||||