Jump to content
Stef's Coding Community
Sign in to follow this  
Guest piam

Problems with superfish javascript/css-dropdown menu

Recommended Posts

Guest piam

Hi!

 

First of all, I don't know if this topic belongs to the javascript section, but I'll start here. I have tried to post topics about this matter in the support page for superfish, but I didn't receive any answer, so I'll give it a try here.

 

I have successfully applied a horizontal Superfish drop down menu to my Joomla 1.5.10 website and I think it looks good.

Although, I have 3 problems:

 

1. I can't center the superfish dropdown menu so it looks good on my website, both in IE and FF. I mixed around a bit with relative and absolute positions, but with no good result. With relative postition, FF positions the menu after the company logo, which is in another "div" on top of the menu.

I thought that I had found a solution to this when I put a "Left: 25%" in the css code in superfish.css. But i realised that that actually caused a problem with the text positioning, the links in the drop down menu were also moved 25% to the right, which looked strange. And in FF the menu jumped outside the page with 25%, so it wasn't an alternative at all.

In Google Chrome it looks ok, but I still can't center the superfish menu.

 

2. The dropdown links disappears too fast in FF, so you don't have time to click on them. If you are really fast with the mouse, you might be able to "catch" one of the links in the dropdown, it is as if you don't have time to reach the dropdown area in time, and it hovers out. The dropdown shadow image isn't showing at all. But this problem only appears in some FF browsers, in some it look ok, very strange...

 

3. When I press on the menu link which has a sumbmenu (in IE) and it becomes active, suddently the links in the dropdown (submenu) jumps to the right x amount of pixles, for no obvious reason.

 

You can view the website at http://www.energyopticon.com/

 

I am using the Joomla Vortex template, and this is what my template.css looks like:

 

/*****************************/
/*** Core html setup stuff ***/
/*****************************/

html {
 height: 100%;
 margin-bottom: 1px;
}

form {
 display:inline;
}

body {
   margin: 0px 0px 0px 0px;
}

body, td{
   font-family: Calibri, Verdana, Ariel, sans-serif;
   font-size: 12px;
   color: #333;
   line-height: 1.3em;
}

a:link, a:visited {
   text-decoration: none;
   font-weight: normal;
   color: #C92400;
}

a:active {
   text-decoration: none;
   font-weight: normal;
   color: #B60101;
}

a:hover {
   text-decoration: underline;
   font-weight: normal;
}

input.button { cursor: pointer; }

p { margin-top: 0; margin-bottom: 5px; }

img { border: 0 none; }

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
   padding: 3px 0;
   margin-bottom: 1px;
}

div#main_bg{
   margin:0px auto;
   width: 989px;
   text-align:left;
}

div#f_area{
   margin:0px auto;
   width: 973px;
   text-align:left;
}

div#logo_bg{
   height:68px;
   margin-left: 13px;
   margin-right: 13px;
   width:auto;
}

.logo{
   display: block;
   float:left;
   padding-top:20px;
   font-size:24px;
   color:#333333;
   text-decoration:none;
   font-weight:bold;
   font-family:"Arial",Trebuchet MS,Verdana;
}
div#logo{
   float:left;
   padding-top:25px;
   padding-bottom: 20px;
   font-size:30px;
   color:#333333;
   text-decoration:none;
   font-weight:bold;
   font-family:"Arial",Trebuchet MS,Verdana;
   height: 32px;
}

a.logo,a.logo:hover, a.logo:visited{
   font-size:24px;
   color:#333333;
   text-decoration:none;
   font-weight:bold;
   font-family:"Arial",Trebuchet MS,Verdana;
}

div#user4{
   float:right;
   width:210px;
   text-align:right;
   padding-right:10px;
}

.search {
   text-align:right;
   height:42px;
   padding:7px 0px 0px 47px;
}
.search .inputbox {
   background:#FFFFFF;
   width: 156px;
   height: 17px;
   font-size: 11px;
   color: #454545;
   padding:5px 2px 2px 2px;
   border: 1px solid #848484;
}

#user3{
   margin-left: 13px;
   margin-right: 13px;
   width:auto;
   border:1px solid black;
   height:28px;
   background: url(../images/bg_menu.png) top  repeat-x;

}
#pillmenu {
   text-align:left;
   margin: 0;
}

#pillmenu ul {
   margin: 0;
   margin-top:6px;
   padding: 0 0 0 8px;
   list-style: none;
}

#pillmenu li {
   float: left;
   margin: 0;
   padding: 0;
}

#pillmenu li a:hover  {
   font-family:Calibri, Verdana, Ariel, sans-serif;
   font-size: 12px;
   float: left;
   display: block;
   line-height: 17px;
   padding: 0 17px 0 17px;
   color: #FF0000;
   text-decoration: none;
   font-weight: bold;
   border-right: 0px solid white;
}

#pillmenu li a#active_menu-nav {

}

#pillmenu li a {
   font-family:Calibri, Verdana, Ariel, sans-serif;
   font-size: 12px;
   float: left;
   display: block;
   line-height: 17px;
   padding: 0 17px 0 17px;
   color: #333333;
   text-decoration: none;
   font-weight: bold;
   border-right: 0px solid white;
}

#banner{
   margin-left: 13px;
   margin-right: 13px;
   width: 963px;
   height: 155px;
}

#banner table.contentpaneopen{
   margin-top:15px;
   margin-bottom:15px;
   width:500px;
   float:right;
   text-align:left;
}
#banner table.contentpaneopen td{
   color:#FFFFFF;
   font-family:Calibri, Verdana, Ariel, sans-serif;
   font-size:12px;
}
#leftcolumn{
   padding: 0px;
   margin: 0px auto;
   padding-left:13px;
   width: 225px;
   float:left;
}

#maincolumn{
   width: 735px;
   float:left;
   margin:0px;
   margin-top:-30px;
   padding:0px;
}

div.path{
   padding:15px 0 0 15px;
}

div.nopad {
   float:left;
   padding:0 15px 15px 15px;
}

div.nopad ul {
   clear: both;
}

form#form-login fieldset { 
   border: 0 none; 
   margin: 0;
   margin-left:10px;
}
form#form-login ul li{ 
   padding: 0; 
}

form#form-login ul li a {
   text-align: left;
   padding: 0px;
   font-size: 10px;
   color: #858585;
}

#leftcolumn div.module_menu, #leftcolumn div.module{
   margin: 10px 0px;
   padding: 0px;
   width: 208px;
}
#leftcolumn div.module_menu  div div div, #leftcolumn div.module div div div{
   background: url(../images/rub_bottom.png) left bottom no-repeat;

}
#leftcolumn div.module_menu  div div div, #leftcolumn div.module div div{
   margin: 0px;
   padding: 0px;
   padding-bottom:5px;
   width: 208px;
   height:auto;
}

#leftcolumn div.module_menu div div div div, #leftcolumn div.module div div div div {
   background: none;
   padding: 4px 8px;
}
#leftcolumn div.module_menu h3, #leftcolumn div.module h3{
   text-align: center;
   height: 44px;
   width: 208px;
   line-height: 44px;
   color:#333333;
   font-size:12px;
   margin:0px;
}
table.poll thead td {
   text-align: left;
   padding-left:10px;
}
table.poll td {
   text-align: left;
}
#leftcolumn ul.menu li ul{
   list-style: none;
}
.pollstableborder {
   margin: 5px 10px 10px 10px;
}
/* forms */
#leftcolumn .moduletable ul {
   margin: 6px 0;
   padding: 0;
   list-style: none;
}

#leftcolumn .moduletable ul li {
   margin: 0;
   padding: 0 2px;
}
.moduletable ul {
   padding:10px 0px 10px 15px;
   margin:0px;
}

.moduletable ul li {
   padding:0px 0px 0px 15px;
   margin:0px;
   line-height:18px;
}
#leftcolumn ul.menu li#current ul li {
   margin: 0px;
   padding: 0px;
}
ul.menu {
   padding:10px 0px 10px 15px;
   margin:0px;
}
ul.menu li{
   padding:0px 0px 0px 15px;
   margin:0px;
   line-height:18px;
}
ul.menu li#current a{
   text-decoration:underline;
   color:#333333;
}
ul.menu li ul {
   padding:0px 0px 5px 0px;
   margin:0px;
}
ul.menu li ul li{
   padding:0px 0px 0px 15px;
}
ul.menu li#current ul li a{
   margin-left:15px;
   text-decoration:none;
}
ul.mostread {
   padding:10px 0px 10px 15px;
   margin:0px;
}
ul.mostread li{
   padding:0px 0px 0px 15px;
   margin:0px;
   line-height:18px;
}
ul.latestnews {
   padding:10px 0px 10px 15px;
   margin:0px;
}
ul.latestnews li{
   padding:0px 0px 0px 15px;
   margin:0px;
   line-height:18px;
}
div.componentheading{
   font-weight:bold;
   font-size:16px;
   margin:7px auto;
}

td.contentheading, td.buttonheading{
   font-weight:bold;
   font-size:14px;
   height:33px;
   background: url(../images/contentheading_line.png) bottom repeat-x;
}
table.contentpaneopen{
   border-collapse: collapse;
   margin-left:5px;
}
table.contentpaneopen td{
   padding:2px;
}
span.small, td.createdate, td.modifydate{
   font-size:11px;
   color:#999999;
}
span.pagination span, span.pagination a{
   padding:5px;
}

#f_area div.moduletable, #f_area div.moduletable_menu{
   float: left;
   margin:0px 10px 10px 10px;
   width: 215px;
}
#f_area div.moduletable h3, #f_area div.moduletable_menu h3{
   text-align: center;
   margin:0px;
   height: 38px;
   width: 202px;
   line-height: 38px;
   color:#FFFFFF;
   font-size:14px;
   background:  url(../images/f_area_h3.png) top left no-repeat;    
}

/* System Standard Messages */
#system-message { margin-bottom: 20px; }

#system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}

#syndicate{
   float:left;
   padding-left: 25px;
}

 

This is how the menu looks in index.php if I open it with View Source:

 

 
 
HemOm Energy OpticonElmarknadEnergy Optima 2000Fj?rrv?rmeprognoserOptimala ProduktionsplanerElprognoserElhandelKontaktNyheterLogin

 
 

 

I haven't entered any children menu in the setup for the superfish module (since I didn't know what to enter here). I have a top menu and a main menu att my website, nothing else.

 

This is what my superfish.css looks like:

 


/*** ESSENTIAL STYLES ***/

.sf-menu, .sf-menu * {

   margin:            0;

   padding:        0;

   list-style:        none;

}

.sf-menu {

   line-height:    1.0;

}

.sf-menu ul {

   position:        absolute;

   top:            -999em;

   width:            12em; /* left offset of submenus need to match (see below) */

}

.sf-menu ul li {

   width:            100%;

}

.sf-menu li:hover {

   visibility:        inherit; /* fixes IE7 'sticky bug' */

}

.sf-menu li {

   float:            left;

   position:        relative;

}

.sf-menu a {

   display:        block;

   position:        relative;

}

.sf-menu li:hover ul,

.sf-menu li.sfHover ul {

   left:            0;

   top:            1.5em; /* match top ul list item height */

   z-index:        99;

}

ul.sf-menu li:hover li ul,

ul.sf-menu li.sfHover li ul {

   top:            -999em;

}

ul.sf-menu li li:hover ul,

ul.sf-menu li li.sfHover ul {

   left:            12em; /* match ul width */

   top:            0;

}

ul.sf-menu li li:hover li ul,

ul.sf-menu li li.sfHover li ul {

   top:            -999em;

}

ul.sf-menu li li li:hover ul,

ul.sf-menu li li li.sfHover ul {

   left:            12em; /* match ul width */

   top:            0;

}



/*** DEMO SKIN ***/

.sf-menu {

   float:            left;

   margin-bottom:    1em;

}

.sf-menu a {

   border-left:    0px solid #fff;

   border-top:        0px solid #7D8EA8;

   padding:         .75em 1em;

   text-decoration:none;

   /*color:            #C92400;*/        

}

.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/

   color:            #FF5A5A;

}

.sf-menu a:active {

   color:            #FE0000;

}

.sf-menu li {

   background:        #E4E4E4;

}

.sf-menu li li {

   background:        #E4E4E4;

}

.sf-menu li li li {

   background:        #E4E4E4;

}

.sf-menu li:hover, .sf-menu li.sfHover,

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

   /*background:        #B8B7B7;*/

   outline:        0;

}


.sf-menu li .separator {

   display: block;

   border-left:    0px solid #B8B7B7;

   border-top:        0px solid #B8B7B7;

   padding:         .75em 1em;

   text-decoration:none;

}



/*** arrows **/

.sf-menu a.sf-with-ul {

   padding-right:     2.25em;

   min-width:        1px; /* trigger IE7 hasLayout so spans position accurately */

}

.sf-sub-indicator {

   position:        absolute;

   display:        block;

   right:            .75em;

   top:            1.05em; /* IE6 only */

   width:            10px;

   height:            10px;

   text-indent:     -999em;

   overflow:        hidden;

   background:        url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */

}

a > .sf-sub-indicator {  /* give all except IE6 the correct values */

   top:            .8em;

   background-position: 0 -100px; /* use translucent arrow for modern browsers*/

}

/* apply hovers to modern browsers */

a:focus > .sf-sub-indicator,

a:hover > .sf-sub-indicator,

a:active > .sf-sub-indicator,

li:hover > a > .sf-sub-indicator,

li.sfHover > a > .sf-sub-indicator {

   background-position: -10px -100px; /* arrow hovers for modern browsers*/

}



/* point right for anchors in subs */

.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }

.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }

/* apply hovers to modern browsers */

.sf-menu ul a:focus > .sf-sub-indicator,

.sf-menu ul a:hover > .sf-sub-indicator,

.sf-menu ul a:active > .sf-sub-indicator,

.sf-menu ul li:hover > a > .sf-sub-indicator,

.sf-menu ul li.sfHover > a > .sf-sub-indicator {

   background-position: -10px 0; /* arrow hovers for modern browsers*/

}



/*** shadows for all but IE6 ***/

.sf-shadow ul {

   background:    url('../images/shadow.png') no-repeat bottom right;

   padding: 0 8px 9px 0;

   -moz-border-radius-bottomleft: 17px;

   -moz-border-radius-topright: 17px;

   -webkit-border-top-right-radius: 17px;

   -webkit-border-bottom-left-radius: 17px;

}

.sf-shadow ul.sf-shadow-off {

   background: transparent;

}

 

I would really appreciate if someone could give me a hint to where/how I could fix this, I'm a bit stuck so to speak...!

 

Thanks in advance,

 

/Pia

Edited by piam

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...