I'm having the same problem. When I get the widths of the LI's in
FireFox or IE7/8 they are correct, but IE6 seems to be given me much
smaller sizes and repeating a lot of the widths as well.
On Dec 7, 8:28 pm, Niels <nails.net...@gmail.com> wrote:
> Hope someone can help me with this.
>
> I'm using superfish with the supersubs plugin.
>
> ------------------------- Aim -------------------------
> To apply a width to a div that contains the menu ul so it can be
> centered using css (auto margins).
>
> ------------------------- Method -------------------------
> Added some code tp superfish.js to get the width of the ul (adding
> together widths of each li) which then applies that result to the div.
>
> ------------------------- Problem -------------------------
> Its working up to a point. A value is returned but it seems to be too
> small, causing the menu to run over two lines.
>
> -------------------------Edited Superfish Code
> -------------------------
>
> ;(function($){
> $.fn.superfish = function(op){
>
> var sf = $.fn.superfish,
> c = sf.c,
> $arrow = $(['<span class="',c.arrowClass,'">
> »</span>'].join
> ('')),
> over = function(){
> var $$ = $(this), menu = getMenu($$);
> clearTimeout(menu.sfTimer);
>
> $$.showSuperfishUl().siblings().hideSuperfishUl();
> },
> out = function(){
> var $$ = $(this), menu = getMenu($$), o =
> sf.op;
> clearTimeout(menu.sfTimer);
> menu.sfTimer=setTimeout(function(){
>
> o.retainPath=($.inArray($$[0],o.$path)>-1);
> $$.hideSuperfishUl();
> if (o.$path.length &&
> $$.parents(['li.',o.hoverClass].join
> ('')).length<1){over.call(o.$path);}
> },o.delay);
> },
> getMenu = function($menu){
> var menu =
> $menu.parents(['ul.',c.menuClass,':first'].join(''))
> [0];
> sf.op = sf.o[menu.serial];
> return menu;
> },
> addArrow = function($a){
> $a.addClass(c.anchorClass).append
> ($arrow.clone()); };
>
> // inserted code get width of li and apply to ul
>
> var ulWidth = 0;
> $(".sf-menu > li > a").each(function(i) {
> ulWidth += $(this).outerWidth(true);
> });
> $("#sf-menu-wrap").css("width", ulWidth);
>
> // end inserted code
>
> return this.each(function() {
> var s = this.serial = sf.o.length;
> var o = $.extend({},sf.defaults,op);
> o.$path =
> $('li.'+o.pathClass,this).slice(0,o.pathLevels).each
> (function(){
>
> $(this).addClass([o.hoverClass,c.bcClass].join(' '))
>
> .filter('li:has(ul)').removeClass(o.pathClass);
> });
> sf.o[s] = sf.op = o;
>
> $('li:has(ul)',this)[($.fn.hoverIntent &&
> !o.disableHI) ?
> 'hoverIntent' : 'hover'](over,out).each(function() {
> if (o.autoArrows) addArrow(
> $('>a:first-child',this) );
> })
> .not('.'+c.bcClass)
> .hideSuperfishUl();
>
> var $a = $('a',this);
> $a.each(function(i){
> var $li = $a.eq(i).parents('li');
>
> $a.eq(i).focus(function(){over.call($li);}).blur(function()
> {out.call($li);});
> });
> o.onInit.call(this);
>
> }).each(function() {
> var menuClasses = [c.menuClass];
> if (sf.op.dropShadows && !($.browser.msie &&
> $.browser.version <
> 7)) menuClasses.push(c.shadowClass);
> $(this).addClass(menuClasses.join(' '));
> });
> };
>
> var sf = $.fn.superfish;
> sf.o = [];
> sf.op = {};
> sf.IE7fix = function(){
> var o = sf.op;
> if ($.browser.msie && $.browser.version > 6 && o.dropShadows
> &&
> o.animation.opacity!=undefined)
> this.toggleClass(sf.c.shadowClass+'-off');
> };
> sf.c = {
> bcClass : 'sf-breadcrumb',
> menuClass : 'sf-js-enabled',
> anchorClass : 'sf-with-ul',
> arrowClass : 'sf-sub-indicator',
> shadowClass : 'sf-shadow'
> };
> sf.defaults = {
> hoverClass : 'sfHover',
> pathClass : 'overideThisToUse',
> pathLevels : 1,
> delay : 800,
> animation : {opacity:'show'},
> speed : 'normal',
> autoArrows : true,
> dropShadows : true,
> disableHI : false, // true disables
> hoverIntent detection
> onInit : function(){}, // callback functions
> onBeforeShow: function(){},
> onShow : function(){},
> onHide : function(){}
> };
> $.fn.extend({
> hideSuperfishUl : function(){
> var o = sf.op,
> not = (o.retainPath===true) ? o.$path : '';
> o.retainPath = false;
> var $ul =
> $(['li.',o.hoverClass].join(''),this).add(this).not
> (not).removeClass(o.hoverClass)
>
> .find('>ul').hide().css('visibility','hidden');
> o.onHide.call($ul);
> return this;
> },
> showSuperfishUl : function(){
> var o = sf.op,
> sh = sf.c.shadowClass+'-off',
> $ul = this.addClass(o.hoverClass)
>
> .find('>ul:hidden').css('visibility','visible');
> sf.IE7fix.call($ul);
> o.onBeforeShow.call($ul);
> $ul.animate(o.animation,o.speed,function(){
> sf.IE7fix.call($ul);
> o.onShow.call($ul); });
> return this;
> }
> });
>
> })(jQuery);
>
> ------------------------- The Edited css -------------------------
>
> /*** 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: 10em; /* 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: 2.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: 10em; /* 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: 10em; /* match ul width */
> top: 0;
>
> }
>
> /*** SKIN ***/
> #sf-menu-wrap {
> margin: 0 auto 0 auto;
> padding: 0px;
>
> }
>
> .sf-menu {
> float: left;
> margin: 0 auto 0 auto;
> text-transform: uppercase;
> padding: 0px;}
>
> .sf-menu a {
> /*border-left: 1px solid #fff;
> border-top: 1px solid #CFDEFF; */
> padding: 10px 15px;
> text-decoration:none;}
>
> .sf-menu a, .sf-menu a:visited { /* visited pseudo selector soIE6
> applies text colour*/
> /*color: #FFF; */}
>
> .sf-menu li {
> background: #000;}
>
> .sf-menu li li {
> background: #333;}
>
> .sf-menu li li li {
> background: #333;}
>
> .sf-menu li:hover, .sf-menu li.sfHover,
> .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
> /*background: #666;*/
> outline: 0;
>
> }
>
> /*** arrows **/
> .sf-menu a.sf-with-ul {
> padding-right: 30px;
> min-width: 1px; /* trigger IE7 hasLayout so spans
> position
> accurately */}
>
> .sf-sub-indicator {
> position: absolute;
> display: block;
> right: 10px;
> top: 10px; /*IE6only */
> width: 10px;
> height: 10px;
> text-indent: -999em;
> overflow: hidden;
> background: url(images/arrows-ffffff.png) no-repeat -10px
> -100px; /*
> 8-bit indexed alpha png.IE6gets solid image only */}
>
> a > .sf-sub-indicator { /* give all exceptIE6the correct values */
> top: 10px;
> 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 butIE6***/
> .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;
>
> }
>
> The test site is herehttp://pam.nielsoeltjen.com/
>
> Any theories/solutions anyone?
>
> Thanks, Niels
