- This topic has 11 replies, 2 voices, and was last updated 16 years, 1 month ago by
.
-
Posts
-
Hi, Thanks for your help with this menu. It now works fine in Mac safari, Mac and Windows ffx, but not in IE 7 .
There should be dropdown menus in the first 3 of the 4 top level items (live links in the first one only) Neither dropdowns or links work. The 4th item is a direct link to a page and works fine.Here’s the URL:
http://bkb2.com/sfish/ddn-mylist.htmlCss changes: This is still pretty much your example. Made some minor changes of the text styling and possibly colors. Used a hosted .gif.
Html changes: changed names and urls of list items. Changed numbers of list items as needed.
Javascript: added javascript suggested on generator page for IE6 (and have no idea if I did it properly, but it doesn’t seem to affect the menu in the browsers where it works.)
Thanks,
RegThe Suckerfish Javascript won’t affect other browsers, just IE5, 5.5 and 6. Plus maybe a few [b:2rjuzvtu]really[/b:2rjuzvtu] old browsers.
I’ll take a look and be back in a few minutes.
Your problem is probably caused by there not being any links around some of the text. The CSS has been designed to work with links only. So to do the following bit of code for example:
[code:2fblefuo] <li> Speed Feature |[/code:2fblefuo]You would change it to this:
[code:2fblefuo] <li><a href=""> Speed Feature |</a>[/code:2fblefuo]The dummy links don’t go anywhere, so it won’t affect how the menu operates. But it should correct the problems you are seeing.
Nice to see someone using the CSS generator without WordPress for a change
” title=”Smiley” />Actually, your problem is more serious. You are missing a DOCTYPE declaration. I’m impressed the menu worked in any browser at all.
You should also move that javascript to between your HEAD tags and stick it between IE conditional comments. This will mean that only IE6 will need to download that code (there’s no point in everyone else wasting time loading it) and by putting it in an external file, IE6 users will only need to download it once, not for every page on your site they visit.
I’ll post back with a new version of the code for you page shortly so you can see how it should be done.
[code:1ztwj5jw]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>mlylist with css included</title>
<!–[if lte IE 6]><script type="text/javascript"src="suckerfish_ie.js"></script><![endif]–>
<style type="text/css">
#suckerfishnav { /*full url to gradient (btwn parens) is: ("http://pixopoint.com/multi-level-navigation-plugin/images/suckerfish_red.png") */
background:#c21b19 url("http://www.lastminute-gifts.com/images/red_png2.png") repeat-x;
font-size:14px;
font-family:verdana,sans-serif;
font-weight:bold;
font-style: italic;
color: #ffffff;
width:100%;
}
#suckerfishnav, #suckerfishnav ul {
float:left;
list-style:none;
line-height:40px;
padding:0;
border:1px solid #aaa;
margin:0;
width:100%;
}
#suckerfishnav a {
display:block;
color:#ffffff;
text-decoration:none;
padding:0px 10px;
}
#suckerfishnav li {
float:left;
padding:0;
}
#suckerfishnav ul {
position:absolute;
left:-999em;
height:auto;
width:101px;
font-weight:normal;
margin:0;
line-height:1;
border:0;
border-top:1px solid #666666;
}
#suckerfishnav li li {
width:99px;
border-bottom:1px solid #666666;
border-left:1px solid #666666;
border-right:1px solid #666666;
font-weight:bold;
font-family:verdana,sans-serif;
}
#suckerfishnav li li a {
padding:4px 10px;
width:80px;
font-size:12px;
color:#ffffff;
}
#suckerfishnav li ul ul {
margin:-21px 0 0 100px;
}
#suckerfishnav li li:hover {
background:#9C1F1B;
}
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
color:#ffffff;
}
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
color:#ffffff;
}
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
color:#ffffff;
}
#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;
background:#444444;
}
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
background:#D92220;
}.highlight {background-color: #fffcbb;}
</style>
</head>
<body><ul id="suckerfishnav">
<li><a href=""> Speed Feature |</a>
<ul>
<li><a href="http://www.lastminute-gifts.com/giftemergency.html">Gift EMERGENCY</a></li>
<li><a href="http://www.lastminute-gifts.com/sf-overnight.html">Get it Overnight</a></li>
<li><a href="http://www.lastminute-gifts.com/sf-sameday.html">Same Day Delivery</a></li>
<li><a href="http://www.lastminute-gifts.com/sf-getitnow.html">Get it NOW!</a></li>
<li><a href="http://www.lastminute-gifts.com/sf-announce.html">Announce it Fast</a></li>
<li><a href="http://www.lastminute-gifts.com/clubs/clubs.html">Gifts of the Month</a></li>
<li><a href="http://www.lastminute-gifts.com/sf-diy.html">DIY and Creative</a></li>
</ul>
</li>
<li><a href=""> Occasion |</a>
<ul>
<li><a href="">Birthdays</a></li>
<li><a href="">Wedding</a></li>
<li><a href="">New Baby</a></li>
</ul>
</li>
<li><a href=""> Price |</a>
<ul>
<li><a href="">$10.00 or Less</a></li>
<li><a href="">up to $50.00/<a></li>
<li><a href="">to $100.00/<a></li>
<li><a href="">over $100.00/<a></li>
</ul>
</li>
<li><a href="http://www.lastminute-gifts.com/clubs/clubs.html">Gifts of the Month</a></li>
</ul>
<br><br><p class="highlight">There should be a nice menu above here...If the stylesheet is working, this text will be highlighted.</p>
</body>
</html>[/code:1ztwj5jw]You also had an errant LI tag in there which I removed.
I haven’t tested the above code, so it’s possible I’ve made an error. If you see any problems with it then let me know and I’ll double check it.
I forgot to add that the reason you put the Suckerfish Javascript between your HEAD tags is so that it loads before the rest of your page does. Otherwise IE6 users won’t be able to access the menu until the entire page has finished loading.
Thanks so much! After I fixed a couple more of my typos, the menu works great in IE 7. It’s currently here:
http://bkb2.com/s-fish/mylistryan.htmlI really appreciate your comments and explanations. Seeing how is great, but the comments on why things are done really helps make sense of it all.
My "homework" is to get the menu working in IE 6, but right now I’m just enjoying it working in IE 7
I got a 404 error when I followed your link.
As longas you haven’t changed the CSS from the generator and you have referenced the suckerfish_ie.js file, the menu should work fine in IE6.
Fixed link – it should work now.
http://bkb2.com/s-fish/mylistryan.htmlWhether it’s working in IE6 – that’s my "homework", getting access to a system with IE 6 to check it and see if I did this correctly.
The easiest thing to do is to install IE6 on your existing machine. Tredosoft.com has a set of standalone IE installs which work on Windows XP, although they aren’t compatible with IE8.
For Vista I use a virtual machine and a copy of IE with the Tredosoft standalones installed on it. Microsoft has released some free copies of XP specifically for this purpose which you can download from their site so it doesn’t even cost anything
” title=”Smiley” />For Mac OSX you can either use a virtual machine or pay for a proper virtualisation system like Parallels.
Great information for putting multiple browsers on your computer. For anyone considering serious coding, this info is gold.
For "lightweights" like me, there is a service that lets you test in multiple browsers free. (Nope, this is not a pitch or plug, I was just lucky enough to stumble over it.)
Most browser sites just produce screenshots but this one lets you test what you’re doing on different browsers in different systems. The site is here:
http://www.crossbrowsertesting.comBest chance of being able to access the systems without a big wait is at night. You get a few minutes at a time and you have to be patient – (or pay them – I haven’t tried that yet) But I’ve been able to put that menu on IE6 and get it to work. (Woohoo!)
Thanks so much for your great menus and information.
- You must be logged in to reply to this topic.