CSS - Suckerfish Dropdowns Broken In Ie

I'm not finding a topic which addresses this .. or at least one that I comprehend. I've just begun working with CSS, converting our website from one riddled with tables and frames. The new main page has a set of images at top (which finally don't have borders around them in any testing browser), and a set of dropdowns - which all browsers can see except AOL's. Our AOL user reports he is on 9.0 Optimized.

(how kosher is it here to post the contents of an entire set of files..?)

Pertinent Components:
- CSS: http://www.legendsofkarinth.com/lok_cssindex.css
- HTML: http://www.legendsofkarinth.com/smallership7a.html

Problem Summary:
- all browsers are seeing the rollover buttons performing properly but only after backing down from DOCTYPE STRICT to TRANSITIONAL and reinstalling BORDER="0" on all images with links;
- all but AOL see the four dropdowns parading across the bottom (again, no links).

As an aside, we had to back down from DOCTYPE STRICT to TRANSITIONAL in order for the images to line up in any browser.. I could use some advice there as well. Other than that, the page validates in STRICT but the images have a black line through the midpoint horizontal.

The infamous z-index/select problem in ie6 has become a pain for me now. I have read countless articles and yet to find an understandable and stillworking example of how to get around this.

Apprently there is an iframe method which seems to do the trick, however all sample code that is provided never works.

IE 6 only problem:

I have a list (like a good programmer) for my navigation that generates a drop down via css and some js. Selects stay above it regardless of z-index. I have countless selects scattered throughout my site.

Can someone give me a WORKING example of how to get around this...i don't want to go down the road of hidding all the selects.

Hello everyone,

Thanks in advance for any help you can offer.

I have a single page for a site I'm creating located he

simplethoughts.com/test/index.html

The css file for the page is located he

simplethoughts.com/test/css/screen.css

The main navigation is using suckerfish style dropdowns which work fine in IE7, firefox, and opera. However, when I try the page in IE6 or 5.5, the dropdowns 'drop' about 100px too low and WAY to the right of where they're supposed to and I can't seem to figure out why.

Thanks again for any help...it's extremely appreciated!

-Neil

I'm a bit stumped as far as what I'm doing wrong. Big surprise, eh?

Basically, I made a dropdown navigation menu (tested in FF 3.6.8 and IE 8)...works great. I used an unordered list to do so (and jquery).

Well, the problem is, when I add another list to the page, it adopts some of the same properties as my menu

I do have an ID for the navigation menu, so I'm not sure what's going on here. Any help, thoughts, or ideas would be DEEPLY appreciated!

You can find the sample at:
http://www.myztacia.com/animated-menu2.html
I figured it was easier to post the link than force you to create the webpage yourself

So for a long time I've seen that widths for dropdown menus must be fixed for one reason or another. Trying to make it so that the width of the dropdown was dynamic worked in IE, not Firefox, or vice versa.

For instance, you had a horizontal nav menu (<ul>), with two items (<li>s), "cars" and "trucks". Under cars you have dropdown links for "Focus" and "Sky" (so the width could be very short) but for trucks you have "Chevrolet 510 Extended Cab" and "Ford Yadda Yadda Yad" (so a long width). The widths of these dropdowns would have to be specified, meaning that 1.) it wouldn't be perfect padding unless you define the perfect width and 2.) unless you want to define a different width for each dropdown, the width would have to be the same for all and you might have a buttload more padding for one (like the first item) than another (the second item).

So I'm wondering, if I force my users to CSS3 (which luckily I'm working on a project where I can), does it allow us to ditch this convention, and dynamically size the width of the dropdown based on content? Maybe through display:table-cell?

I've looked around and even the fanciest CSS3 dropdowns still appear to have fixed widths:
http://webdesignerwall.com/tutorials/css3-dropdown-menu

Novice at CSS. I have a Blogger website. I'm trying to put a CSS dropdown menu. In Safari, it works fine. Don't have access to Firefox, so I don't know, but in IE (6&7) the dropdowns are hidden behind any other widgets on the page.
I've seen plenty of forum posts regarding this issue with flash player, but none specifically addressing IE and Blogger widgets.

I've tried adjusting z-index in each li, ul.
I'm still really new at this, so I'd appreciate any help and specific guidance you can offer.

Website: crossfit-hr.com

CSS code (source from CSS MENU MAKER):
.menu{
width:945px;
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:12px;
font-weight:bold;
font-color:#FF0000;
z-index:200;
}
.menu ul{
background:url(removed for thread) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
z-index:200;
}
.menu li a{
color:#000000;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 10px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#FF0000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #0079b2;
border-right:2px solid #0079b2;
border-bottom:2px solid #0079b2;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:150px;
z-index:10000;
/*top:.5em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:150px;
z-index:200;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 8px 0px 8px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#FF0000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
z-index:200;
}
.menu #current{
background:url(removed for thread) top left repeat-x;
color:#FFFFFF;
}
=========================

HTML code for Widget:
<div class="menu">
<ul>
<li><a id="current" href="(removed for thread)" target="_self" >Home</a>
</li>
<li><a href="" target="_self" >Methods & Results</a>
<ul>
<li><a href="(removed for thread)" target="_self">Our Methods</a></li>
<li><a href="(removed for thread)" target="_self">See the Results</a></li>
</ul>
</li>
<li><a href="" target="_self" >How to Start</a>
<ul>
<li><a href="(removed for thread)" target="_self">Starting Options</a></li>
<li><a href="(removed for thread)" target="_self">Sign-Up Form</a></li>
</ul>
</li>
<li><a href="" target="_self" >Schedule & Prices</a>
<ul>
<li><a href="(removed for thread)=dctrh782_10dsmgnqhq" target="_self">Class Schedule</a></li>
<li><a href="(removed for thread)" target="_self">Prices</a></li>
</ul>
</li>
<li><a href="(removed for thread)" target="_self" >Coaches</a>
</li>
<li><a href="" target="_self" >Admin & Media</a>
<ul>
<li><a href="(removed for thread)" target="_self">Online Payments</a></li>
<li><a href="(removed for thread)=0" target="_self">Release Form</a></li>
<li><a href="(removed for thread)" target="_self">CFHR Photos</a></li>
<li><a href="(removed for thread)" target="_self">CFHR Videos</a></li>
</ul>
</li>
<li><a href="(removed for thread)" target="_self" >Contact</a>
</li>
</ul>
</div>

===================

hi, Im making a menu that looks like:
link1 link2 link3 link4

and then wen you hover over link a dropdown may appear

i have the problem that when they appear, they lay on top of each other. ANy idea how to make they display under each other. (it doesnt even work in IE at the mo, but i gues ill laft2 sort that later)

thanks

this is the html: PHP Code:
<ul>
<li><a href="index.php?action=home">home</a></li>
<li><a href="index.php?action=whatnew">what's new</a></li>
<li><a href="index.php?action=offers">special offers</a></li>
<li><a href="#">collections</a>
    <ul><a href="#">drop1</a></ul>
    <ul><a href="#">drop2</a></ul>
<!--when looping thru categories, do a WHERE cat_status >= 2-->
</li>
<li><a href="index.php?action=sBask">shopping basket</a></li>
<li><a href="index.php?action=contact">contact us</a></li>
</ul> 





this is the relevant css:
PHP Code:
#nav ul li {
        position: relative;
        margin: 0;
        padding: 0 10px 0 10px;
        list-style: none;
        display: inline;
    }

    #nav ul li ul {
        position: absolute;
        display: none;
    }
    
    #nav ul li:hover ul {
        display: block;
        left: 0;
        top: 10px;
    }

    #nav ul li:hover ul li {
        height: 20px;
    } 

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.

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!

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

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.

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

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

Hi,



q1)I can't move the menu to the right without problems as i set a margin on #headlinks2 and the links get cluttered?

Code:

#headlinks2 {
height:25px;
}

#headlinks2 a {
color:green;

display: block;
text-decoration:none;
width: 100px;
font-size:13pt;
padding-right:5px;
//margin-left:205px;
}

#headlinks2 a:hover {
color: white;


}

#headlinks2, #headlinks2 ul {
padding: 0;
margin: 0;
list-style: none;
}

#headlinks2 li {
float: left;
width: 100px;
}

#headlinks2 li ul {
position: absolute;
width: 100px;
left: -999em;
}

#headlinks2 li:hover ul {
left: auto;

}

#headlinks2 li:hover ul, #headlinks2 li.sfhover ul {
left: auto;

}
</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>

//html

<div id="headlinks2">


<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>

</ul>
</li>

<li><a href="#">Anabant</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">mex</a></li>

</ul>
</li>

<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>

</ul>
</li>
<li><a href="#">Anabant</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">mex</a></li>

</ul>
</li>

<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>

</ul>
</li>
<!-- etc. -->



</div>

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&nbsp;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&nbsp;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&nbsp;to&nbsp;Serve</a></li>
		
		<li id="main7" class="mainMenu"><a href="./giving.php">Ways&nbsp;to&nbsp;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