Question

I have an issue with my footer block in IE9 Browser which hops once when I hover an a-Tag.

My footer and anchor css:

footer {
    margin: 0 0 0 210px; /* 210 */
    padding: 35px 0 100px 0;
    border-top: 4px solid #E7E7E7;
    background: url(img/color-code.gif) 0 90px no-repeat;
    width: 710px;
}
footer a:focus,
footer a:hover {
    background: url(img/dash_hover.gif) 0 100% repeat-x;
    text-decoration: none;
}

It uses HTML5, but also on a div causes the same issue and jumps 4px downwards.

<footer>
    <p>firm <span>street</span> <span>where</span>   <span>tel:</span> <span><a href="#" target="_blank">mailto</a></span> <span><a href="/impressum" hreflang="de">impressum</a></span>
    </p>
</footer>

Answer 1

I found the solution but i´m not happy about.

My maincontent block:

<div id="header"></div>
<div id="maincontent"></div>
<div id="footer"></div>

my maincotnent flaots anywhere where i deside to clear it everywhere where it have to be cleared but this doesn´t helped.

Then i tried to use overflow: hidden. on my maincontent and this do the hack but how it says it hides overflowed elements thats why i do not like.