CSS problem with IE

[webhead]

I modified some code from the suckerfish site for CSS dropdown menus. Works fine in Safari and Firefox (Mac and PC). But in IE (PC), one test version of the code works but the other doesn't. Here are the links where you can view the pages and see the source code if you want:

live (no work in IE)

test (works everywhere)

I've gone over the code and can't see why the live one shouldn't work in IE when the test one does. The styles (other than colors) are identical.

Help please?

[webhead]

I don't get it.

I made another test page and put the style sheet in with the main page and cut out all the graphics. Still didn't work. Took out one thing at a time till I found out where the problem was.

There are 2 sets of nav links, the top and the left bar. If I remove the left bar it works. It's a UL with LIs just like the other one, only I gave the UL a different ID. There's some kind of conflict going on there, but any ideas would still be appreciated. Gonna go fix the live page now.

[Banfa]

I can see a couple of things that are wrong

1. There is more than 1 element with the id "nav". Id's on a web page are supposed to be unique and behaviour if they are not is undefined.
2. Similarly there is more than 1 element with the id "vnav"
3. There is an error in the DOCTYPE, the is a space missing between the 2 quoted parts (look for "" and put a space between them)

Your description of the problem "it doesn't work" is not good enough. Doesn't work in what way? you don't see the menus, they appear with the wrong styles. Hard to suggest a fix to a problem when you don't know what it is (although posting the URLs was a good idea, I just couldn't what was desired and undesired behaviour).


However if you want to author web-pages that have good cross browser support then you need to write Valid HTML pages. You can validate you HTML on line at the W3Cs site http://validator.w3.org/. Currently (if I correct the DOCTYPE) your page has 60+ errors and warnings.

[webhead]

Hi, thanks for responding.

I've validated some HTML and CSS before but not on this web. But this menu problem is partly caused by my not knowing CSS that well yet, and just copying and pasting code from a tutorial. I wondered about the multiple IDs but that's what the tutorial did, so I just copied it. I assume I could do the same thing with classes then? Or I would use ID for the nav bar since there's only one that does dropdowns?

Sorry about the vagueness. What didn't work was in IE the menus wouldn't drop at all, like it didn't recognize the rollover. The DOCTYPE error came from my editor; I never pay much attention to it. (using Taco, a freebie for the Mac). I'll clean that up and see if I can convert the multiple IDs to classes.

Thanks again!

[webhead]

Well, other than the 5 errors caused by the & in PHPSESSION, the html is cleaned up. Now I'm back to the original situation: the menus (Favorites and Articles) won't drop down in IE.

[Banfa]

OK I see the problem now, strangely last night at home they were working on IE for me.

Right so you have the HTML valid, however there are still several logic errors in your code which unfortunately are not going to easy to explain, and will take a while for me to sort out. I will come back to this at lunch time (cos now I have to work) and try to explain some of the problems.

[webhead]

Thanks, any help is appreciated. CSS tutorials and what people do in the real world don't seem to match, which is very confusing.

Also, in the mean time I might put up some temporary links till the menus are fixed.

[Banfa]

OK where to start ...

In order to avoid having multiple ids with the same value you have changed them all to classes. Now if you were only using CSS this would be fine, unfortunately you are using javascript as well and using getElementById to try and get references to the elements of your menu bar.

The basic method you are using to display your menu are OK, that is having a undisplayed list of sub-menu items that is displayed when you rollover the main menu item.

The reason that it works in Firefox/Mozilla is that for these browsers the menu is handled entirely by the CSS but Explorer needs the help of Javscript which isn't working because there are no ids the Javascript can't locate the top of the menu.

What I have done is uploaded a fixed (and simplified) example to http://www.puttingdownroots.me.uk/~examples/menu.html. The changes I have made are

1. Added an id (HMenu) to the top level of the menu so it can be located easily.
2. Altered the Javascript to use this id to get the starting point in startList.
3. Made some minor alterations to the CSS, removed a:over because it's not valid

[Banfa]

BTW looking at you CSS file it looks to me like it could do with tidying up, I'm not convinced that all the rules there actually relate to elements that exist.

I may be wrong though that is just my impression I didn't go through with a fine tooth comb and check everything.

[webhead]

OK where to start ...

In order to avoid having multiple ids with the same value you have changed them all to classes. Now if you were only using CSS this would be fine, unfortunately you are using javascript as well and using getElementById to try and get references to the elements of your menu bar.

The basic method you are using to display your menu are OK, that is having a undisplayed list of sub-menu items that is displayed when you rollover the main menu item.

The reason that it works in Firefox/Mozilla is that for these browsers the menu is handled entirely by the CSS but Explorer needs the help of Javscript which isn't working because there are no ids the Javascript can't locate the top of the menu.

What I have done is uploaded a fixed (and simplified) example to http://www.puttingdownroots.me.uk/~examples/menu.html. The changes I have made are

1. Added an id (HMenu) to the top level of the menu so it can be located easily.
2. Altered the Javascript to use this id to get the starting point in startList.
3. Made some minor alterations to the CSS, removed a:over because it's not valid

Thank you! All is working now. Yeah, I'm sure the CSS needs cleaned up, but I still have a lot to learn about that. So far it just looks like the world would be a better place if only IE played by the rules. :)

[Banfa]

So far it just looks like the world would be a better place if only IE played by the rules. :)

LOL Oh you are so right :rolleyes: MS are just terrible generally most of the excptions you will need to make will be for IE.

[webhead]

Note:

Occasionally I see someone visit my site from the link here. I've since changed the layout significantly, so the suckerfish menus are not being used anymore. Sorry for the wild goose chase.