MNteractive.com

I apologize for using MNteractive as my notepad, but I thought this bug fix warranted an entry on the WWW at large for the next person that needs to google it. I’ve had this problem many times, and always forget the exact answer.

The problem is designing a site with CSS rollovers and finding that, when viewed in IE/PC, any hover of a link will cause the page to jump a few pixels to the left.

The culprit as it turns out, is due to my method of adding visual margins to my page:


body {
padding: 0% 3%;
margin: 0px;
}


The logic (in my head) being that since padding is applied*inside* the box, then naturally one should use that to give the edges of your page some white space.

Well, even though this works fine in Mozilla, this will trigger the ‘page jump’ on hover issue with IE. The solution? Simply reverse padding and margin:


body {
padding: 0px;
margin: 0% 3%;
}


Same visual result without the annoying IE problem.