Heeeeeeeeelp me please..........before I strangle my neighbours cat.

Active Member

Right a friend of mine asked me to look at his church website, so I redesigned it using their images, text and colour scheme and feedback from my initial design, now I am having this immense problem with IE 7 and I cant for the life of me get it.

I haven't got to IE6 yet but at this moment in time I really don't care.

I know the background images needs replacing before anyone starts, sorry not in a great mood, I was untill I went over the nav in IE, both the main and the body but at the mo, I couldn't care less TBH.

Arrrrrrrrrhhhhhhhhhhhhhhhhhhhh.

Anyhoo any help would be greatly appreciated, before I find my neighbours cat and strangle the life out of it.

The problem is with the drop down menu on the news link, I think it is a layout problem, increasing the z-index to 2 helped but.........

Active Member

OK just had a quick go, and although it has TBH made it more semantically correct, it is still the same problem.

What I have noticed though is in IE7 if you move towards the ul/div element within the li tag which has the onmouseover and onmouseout effect applied to it, it moves up and to the right then once you move off the li tag it disappears as it should do. mmmmm......

Member

Jaz, I'd remove the DIV as it is not necessary. Your submenu should also be a UL to be semantically correct. I've done drop-downs that work cross-browser on numerous sites that work in all browsers and I've always done it with ul's.

I added in the ID of "nav" just to make it easier to follow. Below is the core CSS you'll need. The rest is just up to styling. The following should work in all browsers EXCEPT IE6 since it does not support :hover on elements other than <a> tags. In order to get it fixed in IE6, simply included the google code in a conditional which will allow IE6 to function like normal browsers

<!-- the following script makes IE6 behave like normal browsers and adds in all sorts of CSS support it otherwise lacks -->

That is still local though, but cheers for pointing that out much appreicated, the same effect should still work with a div though, even if it is semantically incorrect. :down:

I want to try to include IE6 in this 1 TBH, mainly because of the site and it's visitors I expect some will be using IE6 that's why I have gone for a JS solution over a CSS one on this one.
But if I cant work it out I'll backdown to your solution, so thank you for the time.

I am unable to make any changes at the mo, but I think it is because I have set the div, on the server, ul, on my local, to block on hover.

Once it hovers over it, it's that that is forcing it up and to the right.
I think if I change it to normal then it should work TBH.
I'll have a go tomoz and post if it does, or doesn't, but I cant really think of anything else as if you move the mouse down slowly in IE7 you see the div moving up and right, then up and right some more, then disapearing as you leave the parent li element.

Mmmm....I don't like things that beat me TBH, and another reason why I want this to work, but it has to be a CSS issue due to the fact that the same happens regardless of it being a ul or a div and there is no break between the link and the li which could cause the issue.