::::Suckerfish menu problem:::
Posted: 16 June 2008 06:00 PM   [ Ignore ]
Newbie
Rank
Total Posts:  15
Joined  2006-09-07

As always, it looks good in firefox, opera, safari, and ie7 but not in ie6. This is what my menu is suppose to look like:


http://i38.photobucket.com/albums/e120/swaters210/menugood.png

As you can see it’s your standard horizontal dropdown menu and I followed the suckerfish menu tutorial found on alistapart.com. It was working fine until I tried styling the child uls on my own. This is the result in IE6:


http://i38.photobucket.com/albums/e120/swaters210/menubad.png


Here’s my HTML:

<div id="mainnav">
<
ul id="nav">
  <
li><A href="default.aspx" title="Home">Home</a></li>

  <
li><a href="aboutus.aspx" title="About Us">About Us</a>
    <
ul>
      <
li><a href="ourhistory.aspx" title="Our History">Our History </a></li>
      <
li><a href="awards.aspx" title="Awards">Awards</a></li>
      <
li><a href="ourstaff.aspx" title="Our Staff">Our Staff</a></li>
    </
ul>
  </
li>

  <
li><a href="services.aspx" title="Services">Services</a>
    <
ul>
      <
li><a href="methodology.aspx" title="Implementation">Implementation</a></li>
      <
li><a href="training.aspx" title="Training">Training</a></li>
      <
li><a href="tailoredreporting.aspx" title="Tailored Reporting">Tailored Reporting</a></li>
      <
li><a href="support.aspx" title="Support">Support</a></li>
      <
li><a href="customprogram.aspx" title="Custom Programming Solutions">Custom Programming Solutions</a></li>
      <
li><a href="workflow.aspx" title="Workflow Analysis">Workflow Analysis</a></li>
      <
li><a href="clientcare.aspx" title="Sage Client Care">Sage Client Care</a></li>
    </
ul>
  </
li>
 <
li><a href="products.aspx" title="Products">Products</a>
    <
ul>
      <
li><a href="accounting.aspx" title=Accounting">Accounting</a></li>
      <li><a href="
sagecrm.aspx" title="Sage CRM">Sage CRM</a></li>
      <li><a href="
ecommerce.aspx" title="eCommerce">eCommerce</a></li>
      <li><a href="
fixedassets.aspx"title="Fixed Assets">FAS</a></li>
      <li><a href="
humanresourcemanagment.aspx" title="Human Resource Management">Human Resource Management</a></li>
      <li><a href="
servicejob.aspx" title="Job Cost &ampService">Job Cost &amp; Service</a></li>
      <li><a href="
businessintelligence.aspx" title="Busienss Intelligence">Business Intelligence</a></li>
      <li><a href="
warehousesolutions.aspx" title="Warehouse Managment Solutions">Warehouse Management Solutions</a></li>
      <li><a href="
manufacturingsol.aspx" title="Manufacturing Solutions">Manufacturing Solutions</a></li>
      <li><a href="
pointofsale.aspx" title="Point of Sale">Point of sale</a></li>
      <li><a href="
addsageapps.aspx" title="More Applications &ampSolutions">Additional Sage Accpac Applications</a></li>
    </ul>

 </li>

 <li><a href="
career.aspx">Careers</a></li>
 

 <li><a href="
support.aspx">Support</a></li>
 <li><a href="
contact.aspx">Contact</a>
   <ul>
       <li><a href="
reps/miami.aspx" title="Miami Representatives">Miami Representatives</a></li>
       <li><a href="
reps/newyork.aspx" title="New York Representatives">New York Representatives</a></li>
       <li><a href="
reps/tampabay.aspx" title="Tampa Bay Representatives">Tampa Bay Representatives</a></li>
       <li><a href="
reps/neworleans.aspx" title="New Orleans Representatives">New OrleansRepresentatives</a></li>
       <li><a href="
reps/orlando.aspx" title="Orlando Representatives">Orlando Representatives</a></li>
   </ul>
 
 
 
 
 </li>
</ul>
</div> 


and the CSS:

/*Main Menu, made using Suckerfish technique*/
#mainnav{
width:832px;
height:30px;
background:#000;
color:#fff; 
margin:0 auto;
background-image:url(../images/navx.png);
background-position:top left;
background-repeat:repeat-x;    
}


#mainnav ul {
  
padding0;
  
margin0;
  list-
stylenone;
  
background:#122742;
  
color:#fff;
  
text-align:left;
 
  
}


#mainnav ul li {
  
floatleft;
  
positionrelative;
  
padding-left:2em;
  
padding-top:.4em;
 
  
}


#mainnav ul li ul li{
width:25em;
padding:0;
padding:.5em;
border-bottom:1px #18314F solid;
}



#mainnav li ul {
  
displaynone;
  
positionabsolute
  
top1em;
  
left0;
  
}


#mainnav li > ul {
    
topauto;
    
leftauto;
    
}



#mainnav li:hover ul, #mainnav li.over ul{ display: block; }


#mainnav li a:link, #mainnav li a:visited{
color:#fff;
text-decoration:none;
width:15em;
padding:10px;

}

#mainnav li a:hover{
color:#ccc;
text-decoration:underline;
}

#mainnav ul#nav li ul {
position:absolute;
left:20px;
top:20px;

}

#mainnav ul#nav li ul li a:hover{
width:15em;


I can post the rest of the CSS if you like, I didn’t have enough characters left in this post. I don’t know, something could be overriding my css rules of the menu? the positioning was off in IE7 until I set a absolute position to the ul tags. Also, where can I find more resources / tutorials on suckerfish and is there a generator for it. I can never get horizontal drop down menus working right. I don’t want to resort to obtrusive javascript and conditional statements or complicate the html structure by adding td tags as I’ve seen in other tutorials on the net.

Profile
 
 
Posted: 18 June 2008 04:13 AM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  15
Joined  2006-09-07

I noticed some threads are getting replies while mine is not. Is mine too hard to follow? Sorry, I can’t provide an actually link because of security reasons.

Profile
 
 
Posted: 13 October 2009 04:20 AM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  1
Joined  2009-10-13

I can post the rest of the CSS if you like, I didn’t have enough characters left in this post. I don’t know, something could be overriding my css rules of the menu? the positioning was off in IE7 until I set a absolute position to the ul tags. Also, where can I find more resources / tutorials on suckerfish and is there a generator for it. I can never get horizontal drop down menus working right. I don’t want to resort to obtrusive javascript and conditional statements or complicate the html structure by adding td tags as I’ve seen in other tutorials on the net.

Can you posts the other codes? Just asking why are you using html not using dreamweaver? Codes are there already and designs are there?

Suckerfish tutorials are hard to find.

 

Louelleg
___
Simulation prêt

Profile
 
 
Posted: 03 May 2010 11:03 PM   [ Ignore ]   [ # 3 ]
Sr. Member
RankRankRankRank
Total Posts:  139
Joined  2010-04-23

So is the issue that the dropdown menu has two columns. This might be cause by the CSS “#mainnav li > ul”.
____________________
sudoku - social - puppies

Profile
 
 
Posted: 01 July 2010 08:22 AM   [ Ignore ]   [ # 4 ]
Newbie
Rank
Total Posts:  2
Joined  2010-07-01

I Digged this thread to save it for future

Regards

pepp4

Profile
 
 
Posted: 12 December 2010 09:54 PM   [ Ignore ]   [ # 5 ]
Newbie
Rank
Total Posts:  5
Joined  2010-12-12

Ha! That’s how I found this place. Through digg. Well done, mate!

Profile
 
 
Posted: 21 December 2010 08:02 AM   [ Ignore ]   [ # 6 ]
Jr. Member
RankRank
Total Posts:  42
Joined  2010-12-14
pepp4 - 01 July 2010 08:22 AM

I Digged this thread to save it for future

Regards

pepp4

huh what? that doesn’t make any sense.

Profile
 
 
Posted: 25 January 2011 05:03 PM   [ Ignore ]   [ # 7 ]
Newbie
Rank
Total Posts:  23
Joined  2011-01-06

Suckerfish menu will display as a list of links in browsers such as Netscape 4 that don’t properly support CSS

Profile
 
 
Posted: 27 January 2011 05:45 PM   [ Ignore ]   [ # 8 ]
Jr. Member
RankRank
Total Posts:  44
Joined  2010-10-13

“This dropdown malarkey doesn’t work!” I hear 102.6%

Profile
 
 
Posted: 01 February 2011 01:19 PM   [ Ignore ]   [ # 9 ]
Newbie
Rank
Total Posts:  12
Joined  2011-01-17

You obviously need to hide the lists that we want to ‘drop down’ but to make things as accessible as possible we need to avoid using display

Profile
 
 
Posted: 10 March 2011 10:30 AM   [ Ignore ]   [ # 10 ]
Newbie
Rank
Total Posts:  1
Joined  2011-03-10

The ‘position: relative;’ on the divs below the dropdown menu’s were causing the problems (I dont know why though?). I removed them from the divs below and added them to other elements of the site (eg the right div form now has a position of relative rather than the div itself). It all seems to be working ok now.şiir Thanks

Profile
 
 
Posted: 15 March 2011 02:08 AM   [ Ignore ]   [ # 11 ]
Sr. Member
RankRankRankRank
Total Posts:  139
Joined  2010-04-23

Another option is to use jQuery. I use it a lot and find that it works well across browsers.
_____________________________
Sudoku - Flash Game - Flash Game
Flash Game - xnxx - Flash Game

Profile
 
 
Posted: 28 March 2011 10:53 AM   [ Ignore ]   [ # 12 ]
Jr. Member
RankRank
Total Posts:  39
Joined  2010-10-06

In Internet Explorer with Javascript disabled it will just display the main menu bar which should be set up with links to pages where the sub-menus can be easily accessed

Profile