- This topic has 17 replies, 3 voices, and was last updated 16 years ago by
.
-
Posts
-
Hi, I have searched this forum, but have failed to find a solution so far…same old story…menu works great in FF. Here is the web site:
http://www.shorelinechurch.org/
The menu in question is "MINISTRIES", which in FF is correctly displayed to the right of "CALENDAR". However, in IE6 it is dropped down to below "CALENDAR" (you have to hover over "CALENDAR" to trigger it).
Here is the CSS so far:
[code:354x5nm9]#suckerfishnav, #suckerfishnav ul {
float:none;
padding:0;
margin:0;
width:50px;
display: inline;
}#suckerfishnav a {
display:block;
text-decoration:none;
padding:0px 0px;
}#suckerfishnav li {
float:none;
padding:0;
}#suckerfishnav ul {
position:absolute;
width:50px;
margin:0;
line-height:1;
border:0;
}
#suckerfishnav li li {
width:50px;
}#suckerfishnav li li a {
padding:3px 3px;
width:30px;
}#suckerfishnav li ul ul {
margin: -27px 0 0 145px;
}#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
left:-999em;
}#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
left:auto;
}[/code:354x5nm9]Thanks for any help you can offer!
EDIT by Ryan: placed code inside [html][code:354x5nm9][/html] tags.[/code:354x5nm9]
Hi,
I’m not surprised you are having troubles as you have placed the menu inside another menu. It would be extremely difficult to get the menu working in this way.Is there any reason you can’t just use the PixoPoint menu by itself?
I see you have signed up for our premium membership option, so if there isn’t any reason not to, then I’ll create some new CSS which achieves the same effect (as it looks in FF3) but only using the plugin, not incorporating it inside another menu.
wow…never even thought of that…duh…yes I would appreciate you doing the new css so I can see the best way to do it.
Thanks!
I didn’t manage to get to this in the morning, but I’m working on it right now.
The first thing odd that I’ve noticed, is that you are using the basic XHTML DOCTYPE:
[code:274mk287]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">[/code:274mk287]And then a regular transitional XHTML DOCTYPE in HTML comments below it. I’m currently assuming you will want to use the transitional DOCTYPE so am developing the menu using the transitional DOCTYPE for testing purposes. I’m assuming it will work fine with either DOCTYPE, but if you are definitely intending to use the basic DOCTYPE then it would handy to know so that I can make sure I test with that instead.
Also, your theme is automatically loading a script to activate the dropdowns in IE6, however the plugin automatically adds this script for you. You can turn it off in the plugin, but I recommend removing it from your theme as the plugin links to it externally which reduces the download size for modern browsers, hence will give slightly quicker page loads.
The following HTML and CSS codes will generate a menu which looks identical to your current one, but is powered [b:1whcqeox]only[/b:1whcqeox] by the Multi-level Navigation Plugin.
The CSS was created with a brand new prototype of the CSS generator. You are the first person to receive any code from it. The code should be better and includes new features such as EM’s instead of PX’s for the text size (accessibility advantages) and it is less code heavy (for faster page loads). It doesn’t style the content via the <ul id="suckerfishnav"> tag anymore either, which allows a little more flexibility in the positioning/styling of the menu. This version of the CSS generator has too many bugs for releasing to the public, but will eventually replace the current version. It also behaves nicer on changing font sizes (flyouts don’t go out of position).
[b:1whcqeox]PHP code:[/b:1whcqeox]
[code:1whcqeox]<div id="navbarleft_pixo">
<div id="mainmenu_wrapper">
<div id="mainmenu"><?php if (function_exists(‘suckerfish’)) {suckerfish();} ?>
<div id="search">
<form id="searchform" method="get" action="/index.php">
<input type="text" value="search our site..." name="s" id="X" onfocus="if (this.value == ‘search our site...’) {this.value = ”;}" onblur="if (this.value == ”) {this.value = ‘search our site...’;}" /><input type="image" style="display:inline;" src="http://www.shorelinechurch.org/wp-content/themes/revolution_pro-10/images/search.gif" alt="Search" />
</form>
</div>
</div>
[/code:1whcqeox][b:1whcqeox]CSS code:[/b:1whcqeox]
[code:1whcqeox]
#mainmenu_wrapper {background:#2B2B2B url(‘http://www.shorelinechurch.org/wp-content/themes/revolution_pro-10/images/navbar.gif’);width:100%;height:33px}
#mainmenu {font-size:1.2em;width:100%;float:left;position:relative;text-align:left}
#mainmenu ul {float:left;position:relative;left:30px;margin:0;padding:0;list-style:none}
#mainmenu li {letter-spacing:0em;background:#2B2B2B;font-weight:normal;font-size:0.625em;margin:0;padding:0;margin:0 0px;float:left;font-family:helvetica,sans-serif;position:relative}
#mainmenu li:hover,#mainmenu li.sfhover {background:#999999}
#mainmenu li a {text-transform:uppercase;text-decoration:none;display:block;padding:0 15px;line-height:33px;color:#4E748D}
#mainmenu li a:hover,#mainmenu li a.sfhover {text-decoration:none;color:#FFFFFF}
#mainmenu ul ul {position:absolute;left:-999em;top:33px;width:160px}
#mainmenu li:hover ul,#mainmenu li.sfhover ul {left:auto}
#mainmenu ul ul li a {padding:8px 8px;text-transform:uppercase;text-transform:normal}
#mainmenu ul ul li {z-index:10;width:160px;background:#666666;font-size:1em;font-weight:normal;font-style:normal;background:#2B2B2B;border-bottom:1px solid #C0C0C0;border-left:1px solid #C0C0C0;border-right:1px solid #C0C0C0}
#mainmenu ul ul li a {line-height:1.25em;color:#4E748D}
#mainmenu ul ul li:hover a,#mainmenu ul ul li.sfhover a {color:#ffffff}
#mainmenu ul ul li:hover li a, #mainmenu ul ul li.sfhover li a {color:#4E748D}
#mainmenu ul ul li:hover li a:hover,#mainmenu ul ul li.sfhover li a.sfhover {color:#ffffff}
#mainmenu ul ul li:hover, #mainmenu ul ul li.sfhover {background:#334966}
#mainmenu ul ul ul li {font-size:1em}
#mainmenu ul ul ul, #mainmenu ul ul ul ul {position:absolute;margin-left:-999em;top:0;width:160px}
#mainmenu li li:hover ul,#mainmenu li li li:hover ul,#mainmenu li li.sfhover ul,#mainmenu li li li.sfhover ul {margin-left:160px}
#mainmenu #search {float:right;position:relative;top:0;left:-40px}
#navbarleft_pixo {background:#DDDDDD}[/code:1whcqeox][u:1whcqeox]Note:[/u:1whcqeox] You will need to make a minor theme modification to get this working correctly. I’ll post back with full instructions shortly on how to do this … I need to figure out how first.
In your theme, will be some HTML like this:
[code:2n0rtw4e]<div id="navbarleft">[/code:2n0rtw4e]You need to delete everything from there down to the end of some HTML that looks something like this:
[code:2n0rtw4e] <div id="navbarright">
<form id="searchform" method="get" action="/index.php"><input type="text" value="search our site..." name="s" id="searchbox" onfocus="if (this.value == ‘search our site...’) {this.value = ”;}" onblur="if (this.value == ”) {this.value = ‘search our site...’;}" /><input type="image" style="display:inline;" src="http://www.shorelinechurch.org/wp-content/themes/revolution_pro-10/images/search.gif" alt="Search" /></form>
</div>
[/code:2n0rtw4e]All of that code, should be replaced by the PHP code I pasted into my last post.
Then copy the CSS from my last post and paste that into the plugins settings page in your WordPress admin panel.
The menu should (in theory) start working correctly immediately.
If you need help with integrating it, the easiest way to deal with it is to send your theme files to me via email. Either that or paste your header.php file here.
Alternatively you could give me administrator access to your WordPress admin panel and I can do it for you, but I don’t recommend handing out login details to random people on the internet as they’re not always trust worthy.
PS: Make sure you back your theme files up first in case something goes wrong during the change.
It’s fully integrated now. Although there is a bug which is causing the main content background to dissapear. I should have that fixed in a few minutes.
As per your email, what specifically do you want included in the menu? The only thing I could see that wasn’t generated by the plugin was the home page, so I’ve added that via the plugins’ settings page.
The bug is now fixed and the menu isn’t causing any problems on the page (that I can see, let me know if you find any issues).
I removed the sfhover script from your header.php file (to reduce page load sizes) too.
Those Revolution themes are much easier to work on than most other themes. They’re actually coded quite well which is nice change from some of the junk people often ask me to fix
” title=”Tongue” />[b:37ja8yel]Two more things:[/b:37ja8yel]
[b:37ja8yel]1)[/b:37ja8yel] The new CSS generator doesn’t support anything further than a single flyout. So if you want to put in an extra level of menus you will need to let me know as I’ll have to add in some more code to support that. I don’t recommend having that many flyouts though as users find them hard to navigate when there’s too many levels.
[b:37ja8yel]2)[/b:37ja8yel] I’ve tested the site in IE6, IE7, Firefox 2, Firefox 3, Opera, Chrome and Safari. It appears to be working fine in all of them. I don’t have IE8 beta installed right now so can’t test it, but it should work fine in that too.
Bug fixed … the dropdowns weren’t working in IE6.
Original CSS posted above has been corrected accordingly and site updated with new code.
Thank you!! It seems to be perfect now. I appreciate you getting this done so quickly…will let you know if I run into any further issues.
- You must be logged in to reply to this topic.