Suckerfish Dropdown trouble

Lambsina you have got yourself in an absolute and total state of chaos here , I do mean this kindly though but I really don't know how you have achieved this, to a large extent you are just going to have to work your way very slowly through this menu and at each stage be sure of what is meant to be happening short of re-writing the whole thing for you it's going to be a hell of a job trying to explain where you are going wrong. I presume you have been following some form of guide to do this? if that's the case then you must start over and go through it again methodically.

Firstly some things to do have a look at your stylesheet and tell me when it become possible to run javascript from within a stylesheet, what on earth have you got the js in there for?

Negative margins, don't try and position using negative margins remove it from whatever element it's on in that navbar margin the content div away from the menu.

With your background positioning I think you may be confused about positioning pairs the x-axis horizontal position is stated first then the y-axis vertical it looks as though you may have things back to front.

Although I'm sure it can be done using a rigid graphic that represents all the links I'm not convinced it's the best or easiest method and I would probably choose to slice up the individual links and place them separately on their respective anchor elements, the way you're trying to do things is tricky with the positioning you are having to use.

Hugo.

It is a terrible mess, I know. In answer to some of your questions...

a) How did I end up with such a crazy disaster? I was receiving help on the forum for some IR work on my main nav, and was pointed in the direction of a tutorial (written by the same forum person that was helping me ~ incidentally, my helper was far from a newbie; he's pretty senior judging by the help he's given me in the past as well as at this point.) So I buried myself into his tutorial, and managed to get myself completely lost and confused. Eventually he had to admit that he was terribly busy, and didn't really have time to continue helping me sort through my miles of code ~ he'd already been extremely generous with his time up to this point. So I thanked him sincerely, said I'd continue with my own efforts, and would start a new thread to the forum in general if I had problems. And here I am, after consulting a few other tutorials and getting myself into an even bigger mess than I had been.

b)Javascript on a stylesheet? Yeah, um, I guess I just didn't really... know. Now I feel pretty stupid as I realize how wrong that is. I guess it offers some insight into how confused I'd become. Let's just call that one of those extremely embarrassing newbie mistakes.

With everything else, I'm going to have to try to remove stuff and somehow work my way back to just my main nav with image replacement rollover, which was almost-kind-of-mostly working.

Everything is such a horrible mess, I'm terribly frustrated and just don't know where to begin. I suppose it's no surprise that I'm having trouble telling the difference between what should and shouldn't be removed. But enough of my griping. Looks like I've got a lot of work to try to sort through.

I'm sorry you've been having so much trouble with this but what you've got now actually seems to be worse than what I left you with last time I posted as at least it seemed to be OK in Firefox.
I'm not going to have time to look at this today but maybe over the weekend. If you send me an email as a reminder, it'll help (I'll post results back to here though).

Hmm, well if your following a tutorial then I'll leave you to it I'm sure Tyssen will find time to sort it out for you, but do get rid of the negative margins and the javascript from the stylesheet.

OK, I found a bit of time. I hope you don't mind, but I've reworked a lot of the HTML of the page, getting rid of some unnecessary elements and condensing the CSS.

This works fine in FF and is nearly there in IE. The submenus are little off in IE but I thought I'd leave that up to you to have a look at.

Page can be seen here.

Wow! I was away for a bit ~ Canadian Thanksgiving, mother-in-law in hospital, all kinds of stuff that keeps one away from the computer for a while.

Thank you, thank you, thank you.

I'm going to print out your code, then type it all bit by bit into my HTML and CSS. Rather than just cutting and pasting, I think I'll learn more this way. I'm dying to see what the differences are between my code and yours, so that I can figure out where I went so drastically wrong.

I can't tell you how much I appreciate this. I'll get back to you once I've caught up.

Okay, I've caught up. Learned much. I see that I had tons of redundant code which you'd removed.

I have a few questions in regards to where I sit now:

1) What does the following code do?
* html body { behavior: url(hover.htc); }

2) How do you determine the measurement of em? I've never used it before, and am unsure of how it relates in size to anything else.

3) I appear to have lost the snippet of code that stops you from seeing the ugly unstyled content while the images load up. Could you help me put this in place? I hate seeing the unstyled nav links before the nav buttons get loaded up.

4) There is a small bit of an old unstyled link showing to the left of my "Cases" nav button. Can this be better hidden?

5) In Opera, the big long file address tag shows whenever I hover over the menu. How can I lose it?

Whenever you have time (or anyone else, for that matter) to answer these, I'd really appreciate hearing your thoughts.

J.

The * html hack (the Holly hack) hides stuff from all browsers except IE <= 6. That's because only those browsers need the hover.htc to get non anchor elements to accept :hover. Ordinarily, I'd move it to an IE-only stylesheet served by conditional comments. Then you don't need the * html hack.

This explains about ems quite well.

You won't be able to prevent this as the images need to load. The fix for FOUC only prevents the unstyled HTML appearing before the stylesheet is loaded in IE.

Change the left value for 'Cases' (will have to do 'Contact' too).

I don't understand what this means.

That's Operas default behaviour if you add a title attribute to the link you will get

Title: title text
Address: http://etc

You can turn off tooltips in preferences > advanced

But this is a user choice I don't think there is any other means of dealing with it and anyway why be concerned? it's what the browser does tough, it's not a terrible feature in fact Opera has a lot of features that other browsers would do well to copy.

Hugo.

Thanks to you both for the info... I think I might have to pick up that CSS book that provided the info on em's ~ it looks like a good one.

It's good for me to learn what I can change and what I can't... all part of it I guess.

Tyssen, I've learned a huge amount and greatly appreciate the amount of time you invested in teaching.

Almost forgot a few important things...

1) I haven't gotten the subnav rollovers to work in IE. Any suggestions?

2) A few of the old links are showing through in IE (although not in other browsers). Would this be a case of indenting the text -9999?

3) I'm trying to line up my footer links (currently bordered in green to see better) with the "return to top" button... I'm not sure why the ones on the right haven't moved down like the ones on the left.

http://www.digitalpawprint.com/caseytest/caseytest.html

For 3: remove the top margin from the li and instead give it to the ul. You'll then need to get #return a negative top value to pull it into place.
For 1 & 2: at the risk of sounding like a cop-out I'm going to ask you to return to the example on my site that I provided earlier because it doesn't display either of the two problems you've mentioned.

I've been going over your example as suggested, and am assuming that there is some obvious thing that I'm missing? The only difference I could see is that your ul.IR li has overflow:hidden commented out for your example... so I tried adding it into place but all it did was mess up things in FF, Safari, and Opera and not fix the problem in IE. That and overflow: visible being added to IE5, which doesn't make a difference with regards to this issue.

I'm going to keep going over it, obviously, in hopes of figuring it out.

Regarding the footer, I had to change things when I noticed that the whole footer wasn't showing... adding height caused collapsed margins to happen, so I fixed that and now I'm trying to sort out how to position the footer ul without using top margins. I'll work on that.

As mentioned, I'll keep trying. If it's something obvious that I should get (for any of these things), then I'm determined to do so.

This was my concern in regards to positioning the "returntotop" button.

This was my concern in regards to positioning the "returntotop" button.
I was referring to your attempts to force positioning on the top menu layout not in reference to the bottom of the page. one can naturally use such properties when one understands how to use them but it's all to common to see people misusing them.

Hugo.

You can use margin-top on the ul, just not on the individual list items themselves in this case.

I managed to do it with padding on the footer ul, and it seems to have worked in all browsers.

I understand better now what Hugo meant about the negative margins. (I thought it was odd that you two were saying different things... obviously my mistake).

I'll focus now on this puzzle of the dropdown submenus in IE.

Well, I must confess I've poured over it for some time now and the answer is eluding me. I've looked over your tutorial numerous times now, and am completely baffled as to why my dropdown menus won't work in IE. Even more confusing is that my code is identical (so far as I can tell) to the code that you put together in showing me how to make my page work ~ although your dropdowns work in IE and mine don't. I know I must be missing something, but I just can't find it. I certainly don't expect you to drop all of the answers into my lap, but some hints in the right direction would be oh-so-greatly appreciated!

http://www.digitalpawprint.com/caseytest/caseytest.html

The reason your dropdowns don't work in IE is that the path to the hover.htc is incorrect. Have you actually downloaded one from http://www.xs4all.nl/~peterned/csshover.html ?

I've re-read the whatever:hover article about five times now and am starting to get my head around it. Feeling like a bit of a tard. Does everyone have this much trouble? Anyways, unimportant.

I'm not sure what you mean about whether or not I've downloaded something from the page... I'm not sure what I'm to download. I thought I'd just try to adjust my code accordingly, but I suspect I'm doing the wrong thing as it doesn't appear to be working as I'd semi-expected after making changes. I figure before even getting the submenus to show, the first logical thing to concentrate on would be getting the main nav hovers to work in IE.

For example, here's what I had:

.homemenu { left: 0; } .homemenu em { background-position: 0 0; } .homemenu:hover em, .homemenu:active em { background-position: 0 -25px; }

And here's what I changed:

.homemenu { left: 0; } .homemenu em { background-position: 0 0; } li.homemenu:hover em, li.homemenu:active em { background-position: 0 -25px; display: block; }

Because I thought that adding the li's would give that line a higher value than the line previous, and adding display:block would tell it what to do. So I thought that would get it to show.

But... uh... that doesn't work. So obviously I'm not doing it right. Could you point out where my thinking is off?

Okay I figured out what you meant... it's a separate file, the htc file. I downloaded it off your example of my page and now the hovers are working in IE. I'll remove those changes that I made (shown in my last post) as I can see now that they weren't needed.

Question for you: How come I can't open the htc file in BBEdit to look at it? How would I create one of these files?

I'm not sure why you can't open it. I can open it in my text editor. You might have to right click on it and then select a program to open it with. And unless you're good at javascript, you probably wouldn't create your own .htc file.

Well that's okay then... if I've been struggling with getting this working, then I definitely don't need to be thinking about creating htc files!

I'm hoping you can help me solve two last related problems before I put this thread (finally!) to rest...

1) Do you have any idea why the last few original text links of the main nav are showing up and getting in the way of my main nav buttons in IE? It doesn't happen in the other browsers and its messing up my nav.

2) I placed the subnav lists very specifically so that they'd show up beneath each parent nav item. In IE, they don't line up the same at all... in fact they're way off. Is there a hack I can use for IE to make them line up consistently with the other browsers?

Turns out I'd got my numbers a bit wrong before and was then trying to give the submenus different values which wouldn't be necessary if I'd got it right the first time:

/* Main nav starts here */ ul.IR li { position: relative; font-size: 0.9em; } .IR em { display: block; position: absolute; top: 0; left: 0; z-index: 9; } /* For IE5.x mac only */ * html>body .IR { position: static; font-size: 10px; } * html>body .IR em { position: static; } .nav { margin-left: 23px; list-style: none; height: 25px; } .nav li { float: left; } .nav li, .nav li em { height: 25px; } .homemenu em, .servicesmenu em, .aboutmenu em, .casesmenu em, .contactmenu em, .linksmenu em { background: url(http://www.digitalpawprint.com/caseytest/images/main_nav2.gif) no-repeat; cursor: pointer; } .homemenu, .homemenu em { width: 100px; } .servicesmenu, .servicesmenu em { width: 120px; } .aboutmenu, .aboutmenu em { width: 73px; } .casesmenu, .casesmenu em { width: 84px; } .contactmenu, .contactmenu em { width: 87px; } .linksmenu, .linksmenu em { width: 71px; }

.homemenu { left: 60px; }
.homemenu em { background-position: -60px 0; }
.homemenu:hover em { background-position: -60px -25px; }
.servicesmenu { left: 36px; }
.servicesmenu em { background-position: -136px 0; }
.servicesmenu:hover em, .servicesmenu:active em { background-position: -136px -25px; }
.aboutmenu { left: 0; }
.aboutmenu em { background-position: -222px 0; }
.aboutmenu:hover em, .aboutmenu:active em { background-position: -222px -25px; }
.casesmenu { left: 144px; }
.casesmenu em { background-position: -438px 0; }
.casesmenu:hover em, .casesmenu:active em { background-position: -438px -25px; }
.contactmenu { left: 134px; }
.contactmenu em { background-position: -513px 0; }
.contactmenu:hover em, .contactmenu:active em { background-position: -513px -25px; }
.linksmenu { left: 134px; }
.linksmenu em { background-position: -600px 0; }
.linksmenu:hover em, .linksmenu:active em { background-position: -600px -25px; }

/* sub nav function starts here */
.nav a
{
display: block;
}

/* The Holly Hack */
* html .nav a
{
height: 1%;
}

.nav li ul
{
position: absolute;
z-index: 100;
top: 25px;
left: -9999em;
width: 8em;
margin-left: 0;
padding-left: 0;
list-style: none;
border: 1px solid #ccc;
background: #fff;
}

.nav li:hover ul { left: 0; }

.nav li li
{
height: auto;
font-size: 110%;
border-bottom: 1px solid #ccc;
}

.nav li ul a
{
text-align: left;
width: 6.8em;
padding: 0.25em;
color: #999;
background: #fff
text-decoration: none;
}

.nav li ul a:hover
{
color: #660033;
background: #fff;
}

There still seems to be the same problem ~ the last two main nav plain links are sitting over top of the buttons, and the subnav lists for the last three main nav items are off... I think they're hovering beneath the original plain links instead of the buttons. It's the space between "about" and "cases" that is causing the issue. I think for this reason the subnav lists do each have to be placed independently.

I adjusted a few numbers from what you gave me in trying to cover up some of the plain nav links, but they still show through in IE.

Have a look: http://www.digitalpawprint.com/caseytest/caseytest.html

Using exactly what I posted above:

http://www.tyssendesign.com.au/sites/Casey/

Who knows what I had messed up where... (I've gone over it multiple times with a fine-toothed comb and just couldn't locate my errors)... but your version works perfectly in all browsers. Whatever little thing I had different was enough to keep throwing it off in one browser or another.

So I admit I finally made it easy on myself and cut and paste your code over mine... and as expected, it now works beautifully. Not the way I normally like to fix things, but I think you'd agree that at this point it had to be done.

I can't thank you enough for spending such a ridiculously lengthy amount of time on this with me. The most important thing is that I definitely have learned a great deal. I might not have caught the exact source of the one small error throwing me off, but I can live with that. I think the next suckerfish drop-down I do will be much more successful.

If you're a believer in karma then know that you've got a huge windfall coming to you. Thank you Tyssen, thank you thank you thank you. (full face-to-the-ground grovelling bow inserted here).

Let's consider this thread done! ("Oh thank GOD" says Tyssen)

Using image replacement with the Suckerfish method does change things somewhat from the original version so if you're doing a plain text version next time, things are likely to be more straightforward.

Glad we got there in the end.