Active navigation "jumping" in IE7
T开发者_StackOverflow社区he site I am working on can be found here.
In IE7 ONLY:
The active navigation tab "jumps" whenever a user hovers on an inactive tab.
Screenshot:
Can someone explain how to fix this?
All I can see is that there is a problem with your "active" class in your /css/app.min.css file, or there is some javascript going on somewhere that is behaving incorrectly. You might be saying, "Duh!"
I can't tell with the tools that I have on hand. On the other hand, I was able to see that no "jumping" would occur when I removed the "active" class from the link in question. However, the link appeared just liked the rest of the items in the navigation, and you want it to look...uh...active.
If it is an issue somewhere in your scripts, and you don't know what it is, then perhaps change the name of the class and find the logic that sets the link to being active to reflect the name of the new active class.
I would start by commenting-out the existing styling associated with your "active" class and gradually build up to how you want it to appear by reintroducing some of the prior styling and refreshing the page on each small change until you find the problem.
I believe these are all of the problematic styles that need to be changed.:
#tabnav ul#dash-nav li.active a{
margin-left:-8px;
margin-right:-6px;
margin-top:-6px;
position:relative;
background-color:transparent;
}
#tabnav ul#dash-nav li.active a span{
background:url("/images/bg-nav-hover-l.png") no-repeat scroll 0 0 transparent;
color:#fff;
padding:7px 1px 1px 18px;
}
#tabnav ul#dash-nav li.active a .arrow{
display:block;
}
#tabnav ul#dash-nav li.active a:hover .arrow{
display:block;
}
#tabnav ul#dash-nav li.active a img,#tabnav ul#dash-nav li a:hover img{
margin-top:-21px;
}
#tabnav ul#dash-nav li.active a em{
background:url("/images/bg-nav-hover-r.png") no-repeat scroll 0 0 transparent;
height:34px;
width:17px;
}
How about putting a fix for IE7 inside a conditional comment?
精彩评论