Problem with navigation bar

HTML & CSS
1

Hi,

I am using an accordion style navigation bar for my site.

My problem is that in IE7, if you click on several of the accordion tabs that unfold, one after another (as though one was browsing through the menu) then the bottom part of the menu becomes very juddery.
I am able to reproduce this on my machine in IE7 by clicking on “People”, “Research” and “Curriculum”

This problem still exists, but is hardly noticeable in IE8 and (to the best of my knowledge) doesn’t exist in Firefox.

Can anyone give me a clue as to why this is happening and how I could fix it? I am pulling my hair out here.

I’m really sorry that I cannot ask a more exact question. If you would like me to post any code, then please just ask.

I would also be grateful if anyone could confirm that they too are experiencing this problem while using the menu.

Thanks very much.

2

I would ask the Javascript forum about this because you are show/hiding it via JS and this is the CSS forum :slight_smile:
Yes I can reproduce the issue.

3

Thanks for the reply.
Unfortunately the JavaScript forum directed me to the CSS forum.
My biggest problem is not actually having a question to ask apart from “My menu doesn’t work. Help”.
Thanks anyway though.

4

To be fair I think they are wrong. THe javascript shows/hides the menu.

All the CSS does is style it. It does not hide/show it at all. That is purely the Javascript.

Firefox is a tad slow with the menu but IE is more noticable.

In all honesty I don’t think you will get any answers in the CSS forum :).

Off Topic:

Can you direct me to the previous thread in the JS forum? I want to see who gave you that advice lol

5

Hi,
After two days of pulling my site apart bit by bit I have finally fixed the issue.
It was being caused by the background image on the page and presumably the way it was getting resized.
I have since amended it and now the navigation works perfectly (also when resized).

The thread you ask for is here:
http://www.sitepoint.com/forums/showthread.php?p=4498605

Cheers.

6

Background images don’t get resized but that can’t be it. But I’m glad everything is sorted :slight_smile:

7

Yeah, sorry, that’s what I meant. Maybe I should have written “the way it’s not getting resized”.
Interestingly using the following technique (as demonstrated here by Stu Nicholls) alleviated the problem in Firefox, but not in IE:

#img.source-image {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}