Question

I have an item that when hovering in IE7 is causing the item below to shift slightly.

You can see the item in question here: http://andovertowncouncil.customstudio.co.uk/

In the right sidebar each item has an H2 heading. When you hover over this in IE7 the item below shifts down by 2/3 pixels. If you then hover over something else, like the button, this lower item returns to its original position.

I’ve tried to be very specific with my hover effect:

.right-item h2 a:hover {
margin-bottom: 5px;
border-bottom: none;
padding-bottom: 0;
text-decoration: none;
line-height: 30px;
}

But without success.

I’d be grateful for any suggestions on how to solve this one?

Thanks in advance,

Tom

Answer 1

Can’t tell why you’re adding the following rules on hover, but they are what is causing your content shifts:

.right-item h2 a:hover {
    border-bottom: medium none;
    line-height: 30px;
    margin-bottom: 5px;
    padding-bottom: 0;
    text-decoration: none;
}

a:hover {
    border-bottom: medium none;
}

If removed everything looks good in all browsers.