Hi Everyone.

It seems like the Web Squeeze has slowed down a little bit of late! Far less new posts popping up.
Time to rev things up and keep this *fantastic* community alive!

I know it's against the rules double post things, but as my other post has had no response in five days and was at the bottom of an old Topic I thought it might be ok to start a fresh post. (It also seems good because others with this problem will be able to find the topic!)


I've tried using a drop down menu that Linda suggested for my website.
I've managed to get the menu working perfectly and looking right when it's on it's own page.
However when I copy and paste the HTML into my Main Layout page (where the menu is situated about 1/3rd of the way down the page and centered) it sends everything quite crazy.

Main Layout Page

The Menu on it's own

Menu CSS

Other CSS

I've just discovered that the site has gone offline, but please try the links anyway as I'm hoping to fix this ASAP!

Sites not loading for me right now. I'll check back later!

Yes I've just spoken with the hosting provider. They've just moved servers and are all experiancing difficulties with the move. Should be back up in a couple of hours hopefully!

Well after tons and tons of playing around, I can't get it to work.

You seem to have alot of two of everything such as below.


You seem to have two of a lot of different aspects of your navigation such as




The code is so confusing to me. There are so many pieces of css that duplicate.


What's this negative em about? 12em?

I think you need to look over that tutorial I recommended and go step by step. I've spent a lot of time trying to sort this out with no luck. I just don't have time to try and do it from scratch today. Maybe someone else will have better luck.

When your menu is on the main page it is inheriting from the #navigation div. This line in particular is causing problems



If you remove the display: inline the drop down is positioned properly but it does not have the right height/width so there are other conflicts too.

Ok I've fiddled around a lot.
Completely gone through the tutorial again. This time paying lots of attention to every detail.

I've got the page looking much better and just need a bit of help with a few smaller issues.

For some reason my IE fix does not quite work for IE 7.
Instead of the drop down menus appearing below the item you are trying to select they appear to the left. (WHY OH WHY DO YOU HAVE TO CAUSE SO MUCH FRUSTRATION AND PAIN TO WEB DEVELOPERS EVERYWHERE MICROSOFT!) sorry needed to get that out.

Also when I load the page in IE7 all the text in the content window is very large. When you CTRL -, the text does get smaller but for some reason the window stays fixed to it's left position and the rest of the window shrinks and it all becomes uncentered (I'm not sure if that sentance makes much sense but try it and you'll see what I mean).

Main Layout

Menu CSS

Main CSS

Did you set up an ieonly.css file with this menu?
I believe the tutorial I gave you also had that included.

Sorry about the long delay. I've been home sick the last few days. Seemed I worked too hard the last few weeks and when it came resting on the weekend my body decided it needed 5 days and not 2.


For the moment I've just embeded the IE css into the HTML.
I know it's not good, but I was just trying to save some time while I got everything working.

I've just changed that now and my ieonly.css file can be viewed below.

IE Only CSS

I think I've done it correctly. I still don't really understand the whole <!--[IF]> things at the moment. Well, I understand what they're there for and how they work. I just don't consider myself familiar with them.

Look out for an article on conditional comments coming very shortly

Arighty then. After going somewhat insane trying to sort out all these Menu issues over the last few weeks I decided instead of concentrating on it I'd go through, fix up a whole bunch of other stuff with the site and come back to it.

Well now I've done that and I'm after half a day of trying to get the damn menu's to work again I'm back to the insanity.

Could anyone help?

Any suggestions at all that might help me get this damn thing working in IE would be greatly appreciated.

Here are links

Home Page
Looks and works (nearly) fine in Firefox, Opera and Safari (for windows).
Looks ok for IE6 & 7 however the drop down menus don't seem to function at all in ie6 and completely wrong in ie7
Styles

Menu CSS

IE Only CSS

I think I have it..
Here's the code that I fixed: The red areas are the things that I added
See how close this gets you.. if we need to tweak some more let me know!

Awesome, now we're getting somewhere!
They're now appearing where they are supposed to in IE7 however they are very testy. Most of the time they won't stay on the screen long enough to access any of the links. But hey one step at a time right?!

I still am having trouble with IE6. However for some reason my IE6 also won't work with the example in the tutorial so it might be something to do with how I have IE6 & 7 installed side by side? (*hopes*).

Thanks heaps again Linda!

Arrrrgggg!!!

After searching and searching and fiddling and fiddling I was getting no where fast with ironing out the last of the issues with the menu so I decided to revert back to the SuckerFish drop downs.

This of course has given me a fresh bunch of problems.

In Firefox, IE6 & Safari I don't seem to have any issues (some minor issues with how they look, but I can work on that tomorrow).

In IE7 I'm having the same issue, I can't get to the menu items because only the text seems to let the hover-function work and the mico-second the mouse leaves the text *POOF* menu disapears.
In Opera I'm having the same issue, except that it only seems to happen when I go from the 1st level drop down to the 2nd.

I've only implimented the menu on my Index Page
All the other pages still have the Menu Linda suggested.

If anyone can work out a way to fix any of the issues on either menu I will be extremely grateful! Hell, I'll send you a present! (quite serious here, I'll send some kind of silly gift!)

I would say start over. Get sucker fish running perfectly with the default style.

Once you have this, add some background color. Test it across all browsers. Set the button heights and width, check across browsers. So on and So forth.

I have never had any issues with the suckerfish menu.

This is what I did yesterday.
I get it running all fine on it's own page and it looks pretty much right. Then I move it to where it's supposed to be fit on my index page and it goes haywire. I'll look at it again now with 8 hours of sleep since yesterday, hopefully that'll make a difference.

Hello Again!
I've been busy with a hundred other things, however I've finally had a chance to spend a while going through this properly.

I'm very confused as to why this is happening but if someone can shed some light it would be fantastic.

I've spent time getting the Menu working on it's own page without any other styling around it (this is the suckerfish menu).
I then copied and pasted the exact HMTL into my other page and created a link to the Menu CSS.
This caused the menu to look all wrong in IE6 and stop working in IE7.

I then removed most of the styling from the Styles.css sheet (without touching the workinhg suckerfish.css file I had created.
I then copied and pasted all the styles that had nothing to do with the Navigation back in and everything was still working (although looking quite wrong!).

I then manually went through and copied and pasted each section of of the code back in. At each step until the vert end the drop down menu was working, however not displaying correctly. Then I got to this bit of code and became for one very confused and two very frustrated.



As you can see this piece of code seems to have nothing to with the navigation. However once inserted it does 2 things.
1 - Pushes the menu into it's correct spot in all browsers except IE6.
2 - Causes the drop downs to stop working in IE7.

Can anyone explain why this may happen and how I might overcome the issue? I am thinking perhaps I should put in 2 seperate wrapper divs, one for the 2 small navs and the logo. Then a seperate one for the main nav.

I will post back when I have tried this.

My God!
How infuriatingly frustrating!.
All it took to fix this damn issue was a new Div around the menu and a couple of padding and height adjustments.

I closed the 'navigation' div that used to cover the entire Nav section before the drop down menu. Then stuck a new div around the drop down menu. Adjusted a new paddings and heights so that everything fit together again and bang. Everything works!

Weeks of me tearing hair out and scanning through lines of code for something this simple. I guess that's the nature of the business though!

Yeah, been there too. Most often the problems you try to solve for a long time are very small so it is annoying when you finally solve it. If it would be something big, you would notice it sooner

Haha. Very true.

Ok now that I've realised how simple the fix was I'm trying to re-impliment the Menu that Linda suggested in another thread because I like the way it looks and works a bit more than the suckerfish.
Tutorial for Good Drop Down Menu.

The fix was the same for each menu so that parts not too much of an issue. However because there is a 2px border at each end of this design (part of the reason I like this menu more is because I could put this in quite easily) IE6 is not letting it fit where it should.
I've tried fixing it with a new conditional stylesheet. However for some reason IE6 won't read the stylesheet I have set up for it.

The HTML

The IE6 CSS

I'd also like to note that if I change the conditional comment to just IE rather than specific to version it does work. However then it stuffs up IE7 at the same time.