CSS - Cross-browser Problems With Suckerfish-based Menus

http://www.sdtars.com/development/

I can't figure out why I can't get them to popup over the other menus. Can anyone see what I am doing wrong?

Thanks!

Suckerfish came into my life recently and has not only offered a great deal of freedom with dynamic menus at lower overheads than most (totally) Javascript alternatives, but has also had me tearing hairs out more frequently than most other things I know.

The problem I currently face is when viewing my menus in IE6. At first this suggests that the issues lie within the Javascript of the Suckerfish menus...

The pages in questions are located at the following addresses (please excuse the mid-construction state of each):
www.cheapboilers.com/sandbox/index.html
www.cheapboilers.com/sandbox/baxi_105.html

Take the grey vertical menu on the left hand side. The first level appears fine, but the problem is with the second level. In index.html all appears well. However in baxi_105.html when moving down the list in the second level menu the menu disappears when moving from the first to the second item.

At first I thought the problem was to do with the margins surrounding the elements - I thought the li element had detected the mouse as having left the element as it passed over the border. If this were true then the same would happen with the index.html page (which uses the same code/html/css). It does not.

My current theory is that the other elements on the page are somehow interfering with the Suckerfish menus. Index.html has nothing but text in the content of the page. baxi_105.html has images, links etc in it. This theory is backed up by going to the bottom list item in index.html (Worcester) and viewing the second level menu for it. The menu vanishes as with all the menus on baxi_105.html. It is as if the footer of the page is interfering with the operation of the menus.

This disappearing menu issue is driving me up the wall. Please can someone offer a solution?

Thanks in advance.
Andy

I want to make the drop downs on suckerfish menus appear horizontally rather than vertically. Any ideas how to?

PHP Code:
<style type="text/css">
#nav, #nav ul { 
padding: 0; 
margin: 0; 
list-style: none; 
background-color: red;
color: #000;
} 
#nav a { 
display: block; 
width: 10em; 
color: #FFF;
} 
#nav li { 
float: left; 
width: 10em; 
background-color: green;
}
#nav li ul { 
position: absolute; 
width: 10em; 
left: -999em; 
} 
#nav li:hover ul { 
left: auto; 
}
#nav li:hover ul, #nav li.sfhover ul { 
left: auto; 
}
</style>

<ul id="nav"> 
    <li><a href="#">Percoidei</a> 
        <ul> 
            <li><a href="#">Remoras</a></li> 
            <li><a href="#">Tilefishes</a></li> 
            <li><a href="#">Bluefishes</a></li> 
            <li><a href="#">Tigerfishes</a></li> 
        </ul> 
    </li> 
    <li><a href="#">Anabantoidei</a> 
        <ul> 
            <li><a href="#">Climbing perches</a></li>
            <li><a href="#">Labyrinthfishes</a></li> 
            <li><a href="#">Kissing gouramis</a></li> 
            <li><a href="#">Pike-heads</a></li> 
            <li><a href="#">Giant gouramis</a></li> 
        </ul> 
    </li> <!-- etc. --> 
</ul> 





I thought I could change the BLOCK display of the #nav a to INLINE but that doesn't work.

We want the dropdowns to appear as

1 2 3 4 5

rather than
1
2
3
4
5

Thanks

Was referred to Suckerfish and find it very useful but I cannot figure out how to center the menu line on the screen (inside a table or not). Oddly, it automatically centers in IE but not Chrome or Firefox. Any suggestions? Thanks in advance!!
I can post an example of what I mean but don't want to violate the new users guidelines.

I am not sure how to centre all items on the suckerfish menus:

I thought this would work, but it doesn't and even if it did it won't validate:

<ul id="nav">

<div style="text-align:center;margin-left:auto;margin-right:auto;">

NAV ELEMENTS HERE...

</div>

</ul>

Surely someone has had to centre there suckerfish menu to a fixed width box..or any box for that matter.

Hello my helpful comrades,

I'm having some problems with the ol' Suckerfish in IE. It seems the second list is floating left, insead of appearing beneath the first list, and "clear:" won't fix it. I've been looking over the CSS all morning, but can't seem to locate the problem. The menus display perfectly in Fx. I have a feeling a lack of sleep is making me mildly stupid, but the slow progress thus far has driven me to seek help

I've put the menu in a seperate .css file from the main layout to make it easier to read:

CSS

HTML

Cheers!

Hi fowks,

Normally I'm able to solve CSS issues relatively easily, well with some experimentation at least. However, this one has really got me stumped.

Basically, I'm developing a menu for a weblication which is based on the famous Suckerfish menus. Everything works ok in IE and Mozilla when in an Left-to-Right (LTR) environment, but it doesn't work quite so well when the direction is flipped to RTL. IE copes fine, but FF doesn't. The menu works itself, but the viewport doubles in size and scrolls off to the right, even though there are no elements there. Anyone got an idea as to what could be doing this? I've included the relevant files for you to trial.

Thanks for having a look. Hope you can help. It's driving me nuts.

Cheers,
John

I'm trying to use suckerfish style drop downs, based on CSS with javascript only for an Internet Explorer hack. It's working fine for a single horizontal row of menus, however I wanted to setup a few rows of other menus underneath the first row. The problem is that the dropdown goes underneath the menus under it and I can't figure out how to fix it.

This is an example of the problem.

Any 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 was working on a menu following the suckerfish tutorial at Alist Apart and I've got it working in FF but not IE6. Big surprise. There's 2 issues with IE 6:

1. The menu is sitting lower in IE than in FF.

2. The dropdowns aren't working in IE at all. I've applied the js hack and it's still not working. I can't find what I'm missing but I know it's there somewhere.

Here's the url: menu

Please help. Thanks.

Brad

Hi all,

The following CSS and HTML work fine in Mozilla, Netscape and Firefox.

It can be viewed in action at:
http://www.sirfragalot.com/wikindx2/

(choose the 'chocolate vanilla fudge sundae' from the Wikindx/preferences menu.)

I have two questions:

1/ I'm aware that Konqueror does not support CSS drop-downs. It doesn't concern me as I've programmed a way around it. However, the menu items occasionally stack up vertically on the left side of the browser window: they're supposed to be horizontal. This stacking and subsequent un-stacking seems to be quite random. What's the fix?

2/ In IE, the drop-downs are rendered from the bottom right corner of the originating top menu item (they should be directly underneath). What is the fix?

HTML CODE:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!-- begin header template (+ 3 lines up!) -->
<head>
<title>WIKINDX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="chocolate.css" type="text/css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
   var sfEls = document.getElementById("nav").getElementsByTagName("LI");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>
</head>
<body>
<!-- begin menue template -->
<table class="menuTable" border="0" cellspacing="0" cellpadding="0" align="left">
<tr class="" align="left" valign="top">
<td class="" align="right" valign="top">

<ul id="nav">
  <li><a class="menuLi" href="index.php?action=frontNoMenu">Wikindx</a>
          <ul>
            <li><a class="menu" href="index.php">Home</a></li>
            <li><a class="menu" href="index.php?action=preferencesDisplay">Preferences</a></li>
          </ul>
  </li>
  <li><a class="menuLi" href="index.php?action=fileNoMenu">File</a>

          <ul>
            <li><a class="menu" href="index.php?action=exportRtf">Export RTF</a></li>
            <li><a class="menu" href="index.php?action=exportBibtex">Export BibTeX</a></li>
            <li><a class="menu" href="index.php?action=showFiles">Show Files</a></li>
          </ul>
  </li>
  <li><a class="menuLi" href="index.php?action=editNoMenu">Edit</a>

          <ul>
            <li><a class="menu" href="index.php?action=editCreator">Creator</a></li>
            <li><a class="menu" href="index.php?action=editJournal">Journal</a></li>
            <li><a class="menu" href="index.php?action=editPublisher">Publisher</a></li>
          </ul>
  </li>
  <li><a class="menuLi" href="index.php?action=resourceNoMenu">Resources</a>

          <ul>
            <li><a class="menu" href="index.php?action=listDisplay">List</a></li>
            <li><a class="menu" href="index.php?action=searchDisplay">Search</a></li>
            <li><a class="menu" href="index.php?action=selectDisplay">Select</a></li>
            <li><a class="menu" href="index.php?action=resourceNew">New</a></li>
          </ul>
  </li>

  <li><a class="menuLi" href="index.php?action=textNoMenu">Text</a>
          <ul>
            <li><a class="menu" href="index.php?action=allMusings">Musings</a></li>
            <li><a class="menu" href="index.php?action=randomMusing">Random Musing</a></li>
            <li><a class="menu" href="index.php?action=allParaphrases">Paraphrases</a></li>
            <li><a class="menu" href="index.php?action=randomParaphrase">Random Paraphrase</a></li>

            <li><a class="menu" href="index.php?action=allQuotes">Quotes</a></li>
            <li><a class="menu" href="index.php?action=randomQuote">Random Quote</a></li>
          </ul>
  </li>
  <li><a class="menuLi" href="index.php?action=adminNoMenu">Admin</a>
          <ul>
            <li><a class="menu" href="index.php?action=superadminLogonDisplay">Logon</a></li>

          </ul>
  </li>
  <li><a class="menuLi" href="index.php?action=helpNoMenu">Help</a>
          <ul>
            <li><a class="menu" href="index.php?action=helpDisplay">Wikindx Help</a></li>
            <li><a class="menu" href="index.php?action=aboutWikindx">About Wikindx</a></li>
          </ul>

  </li>
</ul>
</td>
</tr>
</table>
<br />
<!-- end menu template -->
</body>
<!-- end footer template (+ 1 line down!) -->
</html>

CSS CODE:
Code:

body {
   background   :   #74664a;
   font-family   :   sans-serif;
   font-size   :   0.9em;
   color      :   #f6eedf;
}
/* SuckerFish CSS drop down style */
#nav, #nav ul {
   padding: 0;
   margin: 0;
   list-style: none;
}

#nav a {
   display: block;
   width: 7em;
}

#nav li {
   float: left;
   width: 7em;
   background   :   red;
}
#nav li ul {
   position: absolute;
   width:  7em;
   left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
   left: auto;
}
/* End Suckerfish Style */


/* Standard links such as top menu links */
A:visited, A:link, A:active {
   text-decoration   :   none;
   color      :   #74664a;
   background   :   #efd197;
   border-left      :   1px groove #f6eedf;
   border-top      :   1px groove #f6eedf;
   border-right      :   1px groove #f6eedf;
   border-bottom      :   1px groove #f6eedf;
   font-size   :   0.9em;
}
A:hover {
   text-decoration   :   none;
   background   :   #f6eedf;
   color      :   #74664a;
   border-left      :   1px groove #f6eedf;
   border-top      :   1px groove #f6eedf;
   border-right      :   1px groove #f6eedf;
   border-bottom      :   1px groove #f6eedf;
   font-size   :   0.9em;
}
/* .menu = submenu links */
A.menu:visited, A.menu:link, A.menu:active {
   text-decoration   :   none;
   color      :   #74664a;
   display      :   block;
   border-bottom   : 1px solid #f6eedf;
   width      :   6em;
   background   :   #efd197;
   font-size   :   0.9em;
   text-align   :   left;
}
A.menu:hover {
   text-decoration   :   none;
   background   :   #f6eedf;
   display    :   block;
   color      :   #74664a;
   border-bottom   : 1px solid #f6eedf;
   width      :   6em;
   font-size   :   0.9em;
   text-align   :   left;
}
/* normal links and paging links */
A.link:visited, A.link:link, A.link:active, A.page:visited, A.page:link, A.page.active {
   text-decoration   :   none;
   color      :   red;
   background   :   transparent;
   border      :   none;
}
A.link:hover, A.page:hover {
   text-decoration   :   none;
   background   :   #f6eedf;
   color      :   #74664a;
   border      :   none;
   border      :   none;
}
/* resource links for resource URLs */
A.rLink:visited, A.rLink:link, A.rLink:active {
   text-decoration   :   none;
   background   :   transparent;
   color      :   #f6eedf;
   border      :   none;
}
A.rLink:hover {
   text-decoration   :   none;
   background   :   #f6eedf;
   color      :   #74664a;
   border      :   none;
   border      :   none;
}
/* image links */
A.imgLink:visited, A.imgLink:link, A.imgLink:active {
   text-decoration   :   none;
   background   :   transparent;
   border      :   none;
}
A.imgLink:hover {
   text-decoration   :   none;
   background   :   transparent;
   border      :   none;
}
/*****
*  .titleTable:  the table containing the title bar
*****/
.titleTable {
   width      :   90%;
}
/*****
*  .menuTable:  the table containing the drop-down menus
*****/
.menuTable {
   margin      :   0 0 0 5%;
}
/*****
*  .menuLi:  text-color in list items of the drop-down menus
*****/
.menuLi {
   color      :   black;
}
/*****
*  .mainTable:  the table containing the main content of WIKINDX
*****/
.mainTable {
   border      :   none;
   width      :   90%;
   padding      :   0.2em;
   clear      :   both;
}
/*****
*  redefine HTML headings - see /core/html/MISC.php
*****/
h1, h2, h3, h4   {
   color      :   #f6eedf;
   margin      :   0 0 1em 0;
}
/*****
*  .footerFooter:  footer information at end of script - part of a table
*****/
.footerTable  {
        font-size   :   0.6em;
   color      :   #f6eedf;
   width      :   90%;
}
/*****
* .error: <p>error messages</p>
*****/
.error {
   background   :   red;
   color      :   black;
}
/*****
* .success: <p>success messages</p>
*****/
.success {
   background   :   #33ff00;
   color      :   black;
}
/*****
*   .small: small text
*****/
.small, .hint {
   font-size   :   0.8em;
}
/*****
*   .hint: text hints given to provide further information usually on form input.  Often used in conjunction
*      with .small and usually the class of <span>....</span>
*****/
.hint   {
   color      :   #f6eedf;
}
/*****
*   alternate background colours and font sizes for <td>resources</td> in a bibliographic list
*****/
.alternate1 {
/*   background   :   #efd197; */
/*   background   :   #f8efdf; */
   border      :   2px groove #583b04;
   font-size   :   0.9em;
   color      :   #f6eedf;
}
.alternate2 {
/*   background   :   #ede5d8; */
/*   background   :   #f6eedf; */
   border      :   2px groove #583b04;
   font-size   :   0.9em;
   color      :   #f6eedf;
}
/*****
*   .highlight:   highlight <span>search terms</span> in text
*****/
.highlight {
   color      :   #583b04;
   background   :   yellow;
}
/*****
*   .required:   highlighting for <span>required</span> form input elements (asterisk).
*****/
.required {
   color      :   red;
}

I am having problem making this cross browser friendly



Code:

/* Div Structure */

#heading { 
margin: 0;
position: relative;
top: -20px;
background-color:#0066CC;
}

#search { 
float: left;



}


#img {
float:left;
}

#text {
float:right;
}

#phone {

position: relative ;
float: right ;
top: 15px ;
right: 10px


}


#head {
margin: 5px ;
padding: 0; 
height: 195px;
background-color: #FDFCFF;
border: solid;
border-color: #0066CC; 
border-width: 2px; 
background-color: #FDFCFF;
}



#headnav {
float: right ;
margin: 100px 17px 5px 10px; 
padding: 0;
}

#sidebar {
float: left ;
background-color:#FDFCFF;
border-width:2px;
border-style:solid;
border-color: #0066CC;
padding: 10px;
width: 170px;
margin: 2px;
margin-top: 5px;
height: 530px ; 
}

#mainpage { 
float: right; 
position:relative; 
width: 730px ; 
right:  -5px; 
left: -5px;
border: solid;
border-color: #0066CC; 
border-width: 2px; 
background-color: #FDFCFF;

margin-top: 5px;



}

/* Side Bar */

	#sidebar h3 {
		color:black; 
		font-size: 11px;
		font-weight: normal;
		letter-spacing: 0.2em;
		margin: 5px;
		padding: 0px;
		text-transform: uppercase;
		border-bottom:dashed;
		border-bottom-color:black;
		border-width: 1px;
		}
		
	#sidebar ul, #sidebar ol {
		list-style: none;
		margin: 0;
		padding: 0;
	
		
		
		}
		
		
		
	
	
	#sidebar li {

		margin: 0;
		list-style:none;
		padding: 0;
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		}
		
	#sidebar a {
		color: #9999FF;
		text-decoration:none;
		}
		
	#sidebar a:hover {
	color: black;
	text-decoration:underline;

	}
		
	#sidebar div { 
		margin: 20px 0;
		padding: 0;
		}
/* Header Style */ 

	#head h1  {
	font-family:Verdana, Arial, Helvetica, sans-serif ;
	letter-spacing: 0.5em;
	font-size: 2em;
	color: black;
	
	}
	#head a { 
	color: black; 
	text-decoration: none;
	}
	
	
/* Head Nav */ 

	
	#headnav a  { 
	color: black; 
	text-decoration:none; 
	}
	#headnav a:hover { 
	text-decoration:underline;
	}
	
	#headnav p { 
	color:black; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:0.1em;
	
	}

/* Main Page */ 

	#mainpage img { 
	padding: 10px;
	}
	
	#mainpage h2 { 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	color:black; 
	letter-spacing: 0.5em;
	font-style: bold ;
	border-bottom: solid;
	border-bottom-color:#0066CC;
	border-bottom-width: 2px;
	
	}
	#mainpage p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	
	}
	
	#mainpage li { 
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	
	} 
	
	#mainpage h3 { 
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	border-bottom: dotted; 
	border-bottom-color: black;
	border-bottom-width: 1px ;
	latter-spacing: 0.2 em; 
	font-size:18px;
	}
	
	#mainpage a {
	color: #910B2D;
	text-decoration:none;
	}
	
	#mainpage a:hover {
	color:silver;
	text-decoration:underline;
	}
	
	/* Phone */ 
	
	#phone p { 
	color: black ;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px ;

}

/* Heading's */ 

#heading h2 { 
color: white; 
}

Anyone have any recommendations on a good program to check cross browser stuff. I am tired of having to open every browser up to check my sites.

Also, anyone know any good links for getting better at coding for cross browser CSS?

Thanks!

i have a web site that i am redesigning and the redesign is @

http://cometosandiego.com/weekendvisit/index.php

it shows up GREAT in firefox

screwed in opera

and COMPLETLY out of wack in IE 6 and 7

what to do????

thanks

Hi;

I don't mind writing straight CSS with a text editor; my big problem is cross-browser compatibility -- getting all those tweaks for everything you do to include ie 5, 6 & 7 (I guess we can drop 5 by now).

To that end, I don't object to using an IDE or other tool to develop cross browser CSS. So my question is, what is/are the best resources available to handle the cross-browser issues; from broken box model, etc.

** I know about ie7-js from Dean Edwards, but I don't know how well that works.

** I know about some CSS IDE's like Aptana & Stylizer; but again I don't really know how well they handle these issues.

** And I would like to hope there are some sites out there with total references that tells you everything you need to know about cross browser CSS, though all I've found so far are piecemeal articles; how to handle this or that aspect.

So in short, I don't expect one magic bullet (though that would be nice), but I'm looking for pointers to and evaluations of various resources that could be maybe used together to make this problem a little easier.

Thanks