Divs shifting up on mouseover

Hi Everyone

I really hope someone can help me with this - I've been tearing
my hair out trying to figure out what's going wrong.

I have a page which has mouse/rollover navigation buttons but they're
behaving really strangely - only in IE though (surprise surprise). See:

http://www.nottingham.ac.uk/physics/research/astronomy/testpages/template.html

The css is there too, at:

http://www.nottingham.ac.uk/physics/research/astronomy/testpages/style.css

When I hover over the 'vacancies' button the page just screws up. For some reason
the divs seem to shift up or something like that, I'm not exactly sure it is.

The behaviour seems to vary depending on how much text there is in my 'title'
div, i.e. more of the nav buttons begin to affect the layout if the title is longer.

I have to apologise in advance for any code that looks bad, I'm very very new to
web-design stuff!

I'd be really grateful if someone could even just point me in the direction of a solution!

I'm not sure how I close this message thread so I thought I should put up a notice letting people know that the problem is solved.

Any clue as to what was causing it and perhaps how you solved it?