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

Jazajay

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. :mad:

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.........

http://bedtimebliss.co.uk/hope/example2

Jaz
 
Cheers buddy, I'll have a look 2 moz as I'm about to go out TBH.
On a positive note... your design skills look like they're really coming on!
O cheers buddy that means a lot it really does, that's the reason why I took this on pro-bono TBH, need to get my hands dirty, not quite their IMO, but getting their, slowly. lol.

Don't worry the cats still alive for now........, lol.

Thanks for the time, I'll let you know how I get on 2 moz.

Jaz
 
I just had a quick look, I have mine in a div, I suppose I should move it to a list, and it should work, I'll try tomoz and let you know.

Cheers again.

Jaz
 
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......

Any ideas anyone?
 
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.

You're more than welcome to steal my code. An recent site I completed for reference (quicklinks using drop-downs) Sedo Domain Parking - Sedo GmbH

Your basic UL should look simply like this:
<ul id="nav">
<li><a href="#">News</a>
<ul>
<li><a href="#">Sub menu</a></li>
<li><a href="#">Sub menu</a></li>
<li><a href="#">Sub menu</a></li>
<li><a href="#">Sub menu</a></li>
</ul>
</li>
</ul>

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 -->

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

ul#nav li {
position:relative;
}
ul#nav li a {}
ul#nav a:hover,
ul#nav li:hover a { /* this specific style will keep the root level nav element highlighted when you are browsing the drop-downs */

}
ul#nav li ul { /* sets the base style for the drop-down */
position:absolute;
left:-9999em;
display:none;
clear:left; /* gets IE to position item below */
margin:0;
}
ul#nav li:hover ul { /* this unhides submenu on hover */
left:auto;
top:33px; /* customize for your height */
display:block;
}
ul#nav li li {
float:left;
display:block;
}
ul#nav li:hover# li a {
width:150px; /* customize for your height */
display:block;
height:auto;
}
ul#nav li:hover li a:hover {}
Let me know if you have any questions or can't get it to work.
 
Thanks 61pixels.
Yeah I changed it to a ul after Tbwcf's first link.
OK just had a quick go, and although it has TBH made it more semantically correct, it is still the same problem.
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.

Jaz
 
Arrrrhhhhhhhh god darn it.
Once it hovers over it, it's that that is forcing it up and to the right.
What is that?

The flaming IE7 jump bug!!!!!!!
I hate it when it is staring you in the flaming face and you just cant see it. :(

So the fix for the jump bug is to place a div around the affected area and a div around the nested ul has pretty much fixed it. That's just plain annoying.

Cant say I have ever heard it in this context before though. Mmmm..... :confused:

Anyhoo cheers for all the suggestions anyway, they where all very much appreciated.

1 happy Jaz :D
 
Back
Top