Я , поэтому близок к запуску моего первого проекта Magento, и последним этапом было только одно препятствие CSS за другим ... в основном с IE.
Этот последний всплыл сразу после исправления 5 других вещей, и до сих пор не был проблемой.
В IE мои главные навигационные ссылки (2) кажутся примерно на 20 пикселей выше, пока вы не наводите курсор мыши на них, а затем они не встают на свои места.
Навигация CSS:
.nav-container { background:#ffffff url(../images/bkg_nav0.jpg) 50% 0 repeat-y; }
#nav { width:918px; margin:0 auto; padding:0 16px; font-size:13px; }
#nav li { position:relative; text-align:left; }
#nav li.over { z-index:998; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none;}
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav ul li.parent a { background:url(../images/bkg_nav2.gif) 100% 100% no-repeat; }
#nav ul li.parent li a { background-image:none; }
/ * 0 Уровень * /
#nav li { float:left; }
#nav li.active a { color:#8751b0; }
#nav a { float:left; padding:5px 12px 6px 8px; color:#000000; font-weight:bold; display: block;}
#nav li.over a,
#nav a:hover { color:#8751b0; display: block;}
/ * 1-й уровень * /
#nav ul li,
#nav ul li.active { float:none; margin:0; padding-bottom:1px; background:#ecf3f6 url(../images/bkg_nav1.gif) 0 100% repeat-x; }
#nav ul li.last { background:#ecf3f6; padding-bottom:0; }
#nav ul a,
#nav ul a:hover { float:none; padding:0; background:none; }
#nav ul li a { font-weight:normal !important; }
Как видите, не существует :hover свойств с полями, которые перекрывают исходное состояние. Я просто не могу понять это.
Я пробовал Firebug, но просто не могу связать его с проблемами IE. Он хорошо отрисовывается в FF ... и IE 'Developer Tools' просто не может сравниться с Firebug ...
Пожалуйста, любая помощь приветствуется!