CSS - Suckerfish With Ie, Easy One I Guess

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.

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!

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

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,

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

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>

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'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">&nbsp;</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>   &nbsp;   <a href="#">HOME</a>   &nbsp;   <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">&nbsp;</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>&nbsp;</td>
  </tr>
</table>

	
	<span class="style1"></span></td>
  </tr>
  
</table>

</body>
</html>

Thanks for your help

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

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

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

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...