[jQuery] Re: superfish + bgiframe problem on IE6
I'm having the same issue of the drop down pushing the content below it
further down: http://tinyurl.com/6qczuv. It would be great if someone could
point me to where the issue might be.
Joel Birch wrote:
Hi Bob,
You seem to be missing some very important CSS. The submenu ul
elements must be position absolute. Also, I don't see any 'top' or
'left' values or hover rules for them. Please refer to the original
demo CSS files for further clues.
Joel Birch
On 23/10/2008, Bob Sawyer [EMAIL PROTECTED] wrote:
So, the problem I'm having with IE6/Superfish is that the dropdown
menus push all other content down, rather than displaying on top of
the other content.
My superFish code is fairly straightforward:
$(document).ready(function() {
//superFish
$('ul#menu').superfish({
animation : { opacity:show,height:show},
pathClass: current,
speed: fast
});
$('ul#menu').superfish().find('ul').bgIframe({opacity:false});
});
Removing either line makes no difference -- the result is the same,
and obviously having both in there is probably overkill.
My menu is pretty lightweight:
div id=nav class=grid_12
ul id=menu
li class=current /home Home /li
li /collections Collections
ul
li /collections/collection/fall2008
2008Fall 2008 /li
li /collections/collection/spring2009
2009Spring 2009 /li
/ul
/li
li /about About Us
ul
li /news News /li
li /press Press /li
/ul
/li
li /contact Contact Us /li
/ul
/div
I stripped the existing superfish.css down to only the Essential
Styles and apply hovers to modern browsers sections; otherwise the
CSS is pretty straightforward as well:
#nav {
width: 960px;
height: 40px;
background: transparent url(/images/nav_bg.gif) 0px 0px no-repeat;
display: block;
position: relative;
margin: 15px 0 0 0;
z-index: 100;
}
#menu li {position: relative; display:block; float: left; height:
40px; margin: 0; padding: 0; font-size: 16px; line-height: 40px; }
#menu li a {position: relative; display: block; float: left; color:
#64a3b5;text-decoration: none; height: 40px; padding: 0 20px; }
#menu li a:link { color: #64a3b5; }
#menu li a:hover { color: #000; background: #dfdfdf; }
#menu li.current a { color: #333; }
#menu ul {display: block; background-color: #f0e9f1; border-bottom:
1px solid #ccc; margin: 0; padding: 0; clear: both; width: 130px;}
#menu ul li {position: relative; display: block; float: none; height:
30px; margin: 0; padding: 0; line-height: 30px; font-size: 90%;}
#menu ul li a {position: relative; display: block; float: none; color:
#64a3b5; text-decoration: none; height: 30px; margin: 0; padding: 0 0
0 15px; z-index: 120;}
#menu ul li a:hover { color: #000; background: #dfdfdf; }
#menu ul li.current a { color: #333; }
Any ideas?
Thanks,
Bob
--
View this message in context:
http://www.nabble.com/superfish-%2B-bgiframe-problem-on-IE6-tp19795827s27240p20717771.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: superfish + bgiframe problem on IE6
So, the problem I'm having with IE6/Superfish is that the dropdown
menus push all other content down, rather than displaying on top of
the other content.
My superFish code is fairly straightforward:
$(document).ready(function() {
//superFish
$('ul#menu').superfish({
animation : { opacity:show,height:show},
pathClass: current,
speed: fast
});
$('ul#menu').superfish().find('ul').bgIframe({opacity:false});
});
Removing either line makes no difference -- the result is the same,
and obviously having both in there is probably overkill.
My menu is pretty lightweight:
div id=nav class=grid_12
ul id=menu
li class=currenta href=/home title=HomeHome/a/li
lia href=/collections title=CollectionsCollections/a
ul
lia href=/collections/collection/fall2008
title=Fall
2008Fall 2008/a/li
lia
href=/collections/collection/spring2009 title=Spring
2009Spring 2009/a/li
/ul
/li
lia href=/about title=About UsAbout Us/a
ul
lia href=/news title=NewsNews/a/li
lia href=/press
title=PressPress/a/li
/ul
/li
lia href=/contact title=Contact UsContact Us/a/li
/ul
/div
I stripped the existing superfish.css down to only the Essential
Styles and apply hovers to modern browsers sections; otherwise the
CSS is pretty straightforward as well:
#nav {
width: 960px;
height: 40px;
background: transparent url(/images/nav_bg.gif) 0px 0px no-repeat;
display: block;
position: relative;
margin: 15px 0 0 0;
z-index: 100;
}
#menu li {position: relative; display:block; float: left; height:
40px; margin: 0; padding: 0; font-size: 16px; line-height: 40px; }
#menu li a {position: relative; display: block; float: left; color:
#64a3b5;text-decoration: none; height: 40px; padding: 0 20px; }
#menu li a:link { color: #64a3b5; }
#menu li a:hover { color: #000; background: #dfdfdf; }
#menu li.current a { color: #333; }
#menu ul {display: block; background-color: #f0e9f1; border-bottom:
1px solid #ccc; margin: 0; padding: 0; clear: both; width: 130px;}
#menu ul li {position: relative; display: block; float: none; height:
30px; margin: 0; padding: 0; line-height: 30px; font-size: 90%;}
#menu ul li a {position: relative; display: block; float: none; color:
#64a3b5; text-decoration: none; height: 30px; margin: 0; padding: 0 0
0 15px; z-index: 120;}
#menu ul li a:hover { color: #000; background: #dfdfdf; }
#menu ul li.current a { color: #333; }
Any ideas?
Thanks,
Bob
[jQuery] Re: superfish + bgiframe problem on IE6
Hi Bob,
You seem to be missing some very important CSS. The submenu ul
elements must be position absolute. Also, I don't see any 'top' or
'left' values or hover rules for them. Please refer to the original
demo CSS files for further clues.
Joel Birch
On 23/10/2008, Bob Sawyer [EMAIL PROTECTED] wrote:
So, the problem I'm having with IE6/Superfish is that the dropdown
menus push all other content down, rather than displaying on top of
the other content.
My superFish code is fairly straightforward:
$(document).ready(function() {
//superFish
$('ul#menu').superfish({
animation : { opacity:show,height:show},
pathClass: current,
speed: fast
});
$('ul#menu').superfish().find('ul').bgIframe({opacity:false});
});
Removing either line makes no difference -- the result is the same,
and obviously having both in there is probably overkill.
My menu is pretty lightweight:
div id=nav class=grid_12
ul id=menu
li class=currenta href=/home title=HomeHome/a/li
lia href=/collections title=CollectionsCollections/a
ul
lia href=/collections/collection/fall2008
title=Fall
2008Fall 2008/a/li
lia
href=/collections/collection/spring2009 title=Spring
2009Spring 2009/a/li
/ul
/li
lia href=/about title=About UsAbout Us/a
ul
lia href=/news title=NewsNews/a/li
lia href=/press
title=PressPress/a/li
/ul
/li
lia href=/contact title=Contact UsContact Us/a/li
/ul
/div
I stripped the existing superfish.css down to only the Essential
Styles and apply hovers to modern browsers sections; otherwise the
CSS is pretty straightforward as well:
#nav {
width: 960px;
height: 40px;
background: transparent url(/images/nav_bg.gif) 0px 0px no-repeat;
display: block;
position: relative;
margin: 15px 0 0 0;
z-index: 100;
}
#menu li {position: relative; display:block; float: left; height:
40px; margin: 0; padding: 0; font-size: 16px; line-height: 40px; }
#menu li a {position: relative; display: block; float: left; color:
#64a3b5;text-decoration: none; height: 40px; padding: 0 20px; }
#menu li a:link { color: #64a3b5; }
#menu li a:hover { color: #000; background: #dfdfdf; }
#menu li.current a { color: #333; }
#menu ul {display: block; background-color: #f0e9f1; border-bottom:
1px solid #ccc; margin: 0; padding: 0; clear: both; width: 130px;}
#menu ul li {position: relative; display: block; float: none; height:
30px; margin: 0; padding: 0; line-height: 30px; font-size: 90%;}
#menu ul li a {position: relative; display: block; float: none; color:
#64a3b5; text-decoration: none; height: 30px; margin: 0; padding: 0 0
0 15px; z-index: 120;}
#menu ul li a:hover { color: #000; background: #dfdfdf; }
#menu ul li.current a { color: #333; }
Any ideas?
Thanks,
Bob
[jQuery] Re: superfish + bgiframe problem on IE6
hmm.. I thouhgt I was using the latest method :)
I've downloaded the latest version of bgiframe which is currently on
the server. So what you're saying is that I replace my (complicated)
call to superfish in my head with the simple one like you listed, and
it should do the trick?
I'll try that in any case.
Thanks
Ettiene
On Oct 3, 1:54 pm, Joel Birch [EMAIL PROTECTED] wrote:
Hello Ettiene,
There is now a much simpler and less buggy way of using bgIframe. It
is described on the updated Superfish documentation page,
here:http://users.tpg.com.au/j_birch/plugins/superfish/#sample2
You will need to make sure you are using the most up-to-date version
of bgIframe which you can get
here:http://brandonaaron.net/jquery/plugins/bgiframe/docs/#where_can_i_get_it
The improved code for applying bgIframe to Superfish is this:
$(document).ready(function(){
$(ul.sf-menu).superfish().find('ul').bgIframe({opacity:false});
});
Much simpler than the older method that you are currently using.
Joel Birch.
[jQuery] Re: superfish + bgiframe problem on IE6
Hello Ettiene,
There is now a much simpler and less buggy way of using bgIframe. It
is described on the updated Superfish documentation page, here:
http://users.tpg.com.au/j_birch/plugins/superfish/#sample2
You will need to make sure you are using the most up-to-date version
of bgIframe which you can get here:
http://brandonaaron.net/jquery/plugins/bgiframe/docs/#where_can_i_get_it
The improved code for applying bgIframe to Superfish is this:
$(document).ready(function(){
$(ul.sf-menu).superfish().find('ul').bgIframe({opacity:false});
});
Much simpler than the older method that you are currently using.
Joel Birch.
[jQuery] Re: superfish + bgiframe problem on IE6
Ok, I'm struggling a bit here...
My call in the head looks like this:
$(document).ready(function(){
$(ul.nav).superfish()
.find(liulli:has(ul)).addClass(isparent)
.find('ul').bgIframe({opacity:false});
});
I've got that first find in there to add a class isparent to all
li's that have a ul in them, basically if they have dropdown
menus.
The second find is for the bgiframe code
But this doesn't do anything in IE6.
Unfortunately I can't update the code on the geotrust website before
I've fixed it.
Thanks
Ettiene
On Oct 3, 2:10 pm, Ettiene [EMAIL PROTECTED] wrote:
hmm.. I thouhgt I was using the latest method :)
I've downloaded the latest version of bgiframe which is currently on
the server. So what you're saying is that I replace my (complicated)
call to superfish in my head with the simple one like you listed, and
it should do the trick?
I'll try that in any case.
Thanks
Ettiene
On Oct 3, 1:54 pm, Joel Birch [EMAIL PROTECTED] wrote:
Hello Ettiene,
There is now a much simpler and less buggy way of using bgIframe. It
is described on the updated Superfish documentation page,
here:http://users.tpg.com.au/j_birch/plugins/superfish/#sample2
You will need to make sure you are using the most up-to-date version
of bgIframe which you can get
here:http://brandonaaron.net/jquery/plugins/bgiframe/docs/#where_can_i_get_it
The improved code for applying bgIframe to Superfish is this:
$(document).ready(function(){
$(ul.sf-menu).superfish().find('ul').bgIframe({opacity:false});
});
Much simpler than the older method that you are currently using.
Joel Birch.
[jQuery] Re: superfish + bgiframe problem on IE6
Hi Ettiene,
You need to add an .end() to before you add the find('ul').bgIframe() like so:
$(document).ready(function(){
$(ul.nav).superfish()
.find(liulli:has(ul)).addClass(isparent).end()
.find('ul').bgIframe({opacity:false});
});
Joel Birch.
[jQuery] Re: superfish + bgiframe problem on IE6
Or for better performance:
$('ul.nav').superfish()
.find('ul').bgIframe({opacity:false})
.find('li:has(ul)').addClass('isparent');
No .end() needed this way either.
[jQuery] Re: superfish + bgiframe problem on IE6
Hmm, this is the first time I've heard of this problem using the newer method of applying bgIframe. Are you absolutely positive you are using the bgIframe version from the link I gave you? The issue you describe has happened before but I can't remember what the cause or solution was (because I thought it was a thing of the past!). I suggest searching for older threads that describe the issue. There's definitely a solution to be found. Joel. --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups jQuery (English) group. To post to this group, send email to jquery-en@googlegroups.com To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/jquery-en?hl=en -~--~~~~--~~--~--~---
