CSS hover oddity - need a little CSS help

[Jeff]

I'm a table guy, I'll admit it. And I've stayed in my table-comfort-zone for years now where things just stay in their place for me :) But at last I'm trying to do a CSS-only table-free layout to join the 21st century

One glitch on the Travel Nurser Reports (http://www.travelnursereports.com) site I'm working on that I just can't figure out -- when you hover over the bottom link "...revitalizing the industry" in IE7, the [About] [Mission] [Contact] [Survey] links below jump down the page. There is no such behavior in Firefox 2 or Opera 9, only in IE7 when you hover over that bottom link the square buttons below jump down the page by 1/4". The blue banded "travel nurse reports" immediately below it doesn't move, but the buttons below that do jump down in IE7, so I'm stumped. Any ideas what causes this?

(the css file is located at http://www.travelnursereports.com/travel_nurse_reports_travel_nurse_articles.css)

[Jeff]

http://www.travelnursereports.com/css_help_ie7.jpg

[Wassercrats]

Remove the border-bottom-style and border-bottom-width from .sidebar a:hover.

[kitchin]

The page as-is works for me in IE7 on WinXP, same as Firefox. I've noticed some rendering glitches in IE7 that fix themselves on reload.

Whoaaa horsey. Here's another one. Resize your browser until it's less wide than the menu + content. I see the whole content section drop down below the menu. But in Firefox it's fine.

[Jeff]

Remove the border-bottom-style and border-bottom-width from .sidebar a:hover.
Thanks!!! That's it. :bow:

For some reason as soon as I tell IE to change the 1px dotted underline to a 1px solid underline on hover, hovering over the bottom link pushes the divs below it down the page.

a is specified as
border-bottom-style: dotted;

a:hover specified as
border-bottom-style: solid;

causes the behavior in IE, whether or not the width is specified. I like the underline changing from dotted to solid, so I guess I'll either live with the IE7 glitch, or put it in a table :EG:

[Wassercrats]

I didn't notice the change from dotted to solid because the dots are so close. I thought it was a change from grey to black. You can keep the border change. Just add:

margin-top: 66px; to .heading
height: 560px; to .sidebar
height: 28px; to all other .sidebar styles

Then you may want to tweak some spacing or maybe heights a little to make it look exactly as you had it.