Hey guys! Very strange one here. Apparently in IE6, when you hover over one of the links on my page the content moves over to the left a little bit. It's weird and I don't know what is causing it, but I found out that if I replace the background-color a:hover effect with a text-decoration effect then the problem goes away. It is all better explained on these test pages I put up: Problem Page: http://pps.50webs.com/shifting/part1.html Fixed Page: http://pps.50webs.com/shifting/part2.html Sorry... I can't post live links at this forum so I hope those text-links aren't too annoying Well, I've first discovered this bug about two weeks ago and I've been trying to figure it out ever since. I'd love to use a background-color hover effect just like you see on the problem page... but for some reason IE6 can't handle it. Hope someone here can help me out with this one. Thanks guys!
I can't explain exactly why this works but it looks like IE chokes on the "3%" margin in the "#container div" rule. The following works: #container div { float: left; width: 30%; margin-left: 30px; /* Was: margin-left:3%; */ border:1px solid #333; } Also...just a side note, when floating elements...IE doubles the margin left or right of the elements floated. Apply the "display:inline;" rule to the element floated and this fixes the bug. Hope that helps
hey tmeyer thanks for taking a swing at it. Well, what you have suggested is actually something that I've already tested. Although it is another work-around for avoiding the problem (like that fixed page I posted above), it introduces a new problem. See what I am doing here is I have a fluid-width layout. And the margins need to shrink and expand so that they are always evenly spaced and centered across the page. That's why I need the 3% for the margin. Also, it works fine on that fixed page I posted above (even with the % margin). The only thing changed between the two pages is the hover effect. Strange... This makes me think that the problem is not the % margin. It must be something else no? But yeah, like you said, I can't explain exactly either. Thanks for pointing this one out. I've come across this situation in the past and never understood it. That's good to know.... Darn IE, can't live with it, can't live without it
So what do you guys think? Can this problem be fixed or should I just forget about it and file it under the category of "it's just one of those IE things"? I've spent so much time on this and it's driving me crazy. I don't understand how simply changing the background color on a link can cause this...
Check these out. I just skimmed them but they may (or may not) hold the answer. I feel for ya...I've spent the past hour trying to solve the problem and can't figure it out either http://www.positioniseverything.net/explorer/percentages.html http://mnteractive.com/archive/fixing-ies-page-jump-on-hover-bug/ http://www.satzansatz.de/cssd/onhavinglayout If you do find a solution...would you mind letting me know via PM. Thanks
hey tmeyer, thanks again for trying to help and making me feel like I'm not alone. Those links you posted actually helped me more than you might think, and they also lead me to this page: http://motuweb.com/techstuff/textjump.htm Apparently, the only way to solve this problem is by either avoiding the use of % margins (like in your example above). Or by avoiding the use of a background-color change (like in my example above). I guess we should just thank the brilliant minds behind IE. They've done a spectacular job in making our jobs harder. Well thanks for helping me out tmeyer. At least now I can finally put this one to rest and move on.