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:
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
Post a Comment