css - Active navigation "jumping" in IE7 -


the site working on can found here.

in ie7 only:

the active navigation tab "jumps" whenever user hovers on inactive tab.

screenshot:

enter image description here

can explain how fix this?

all can see there problem "active" class in /css/app.min.css file, or there javascript going on somewhere behaving incorrectly. might saying, "duh!"

i can't tell tools have on hand. on other hand, able see no "jumping" occur when removed "active" class link in question. however, link appeared liked rest of items in navigation, , want look...uh...active.

if issue somewhere in scripts, , don't know is, perhaps change name of class , find logic sets link being active reflect name of new active class.

i start commenting-out existing styling associated "active" class , gradually build how want appear reintroducing of prior styling , refreshing page on each small change until find problem.

i believe these of problematic styles need 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 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 .arrow{     display:block; }  #tabnav ul#dash-nav li.active a:hover .arrow{     display:block; }  #tabnav ul#dash-nav li.active img,#tabnav ul#dash-nav li a:hover img{     margin-top:-21px; }  #tabnav ul#dash-nav li.active em{     background:url("/images/bg-nav-hover-r.png") no-repeat scroll 0 0 transparent;     height:34px;     width:17px; } 

Comments

Popular posts from this blog

linux - Using a Cron Job to check if my mod_wsgi / apache server is running and restart -

actionscript 3 - TweenLite does not work with object -

jQuery Ajax Render Fragments OR Whole Page -