Nie mogę sobie poradzić z poprawnym zakodowaniem w CSS menu nawigacyjnego umiejscowionego po lewej stronie (http://tech-project.eu). Przykładowo po wybraniu 'Oferta dla klientów' w Chrome są dziwne odstępy nad i pod podkategoriami (części toczone, części frezowane itd.). W IE 7 jest jeszcze większa tragedia. Nie jestem autorem tego 'wynalazku', więc bardzo proszę o wyrozumiałość i pomoc.
Kod CSS:
.menubackground{ background: url(../img/intro/menubackgroundintro.png) left top no-repeat; padding-left: 30px; padding-top: 5px; margin-left:15px; margin-top:10px; width: 188px; height: auto; } #leftcolumn{ float: left; margin-left: -1100px; /*Set margin to that of -(MainContainerWidth)*/ width: 290px; overflow: hidden; } .innertube_menu { /* own setting */ margin: 10px; margin-top: 0; width: 225px; overflow: hidden; } div.module_menu ul{ padding-left: 0px; text-align: left; list-style: none; } .module_menu a{ color: white; text-decoration:none; } ul.menu .active { background: url(../img/menu_on.png) no-repeat; width:230px; height: auto; /* own setting */ } li#current{ background: url(../img/menu_on.png) repeat-y; width:230px; height: auto; } li#current span { /* own setting */ display: block; margin-top: -20px !important; margin-top: 0px; width: 200px; height: auto; line-height: 26px; padding: 0 0 0 25px; position: relative; clear: both; cursor: pointer; } li#current ul li span { /* own setting */ display: block; width: 180px; height: auto; padding: 0 0 0 25px; position: relative; clear: left; cursor: pointer; } #current ul .active { background: url(../img/menu_on.png) repeat-y; width:230px; height: auto; } ul.menu li ul li{ background: url(../img/menu_on.png) repeat-y; width: 215px; padding-left: 15px; text-transform: none; font-family:Arial; font-size:12px; line-height: 26px; } ul.menu li{ background: url(../img/menu_off.png) repeat-y; width:230px; height: auto; text-transform:uppercase; font-family:Arial; font-size:12px; line-height: 26px; } ul.menu li:hover{ background: url(../img/menu_on.png) repeat-y; width:230px; font-family:Arial; font-size:12px; } div.module_menu ul li a:link, div.module_menu ul li a:hover { text-decoration: none; line-height: 26px; height:26px; } ul.menu li a{ font-weight: bold; text-decoration: none; line-height: 26px; height:26px; padding-left: 25px; } ul.menu li a:hover{ font-weight: bold; } ul.menu li ul li a{ font-weight: lighter; } ul.menu li ul li a:hover{ font-weight: lighter; text-decoration: underline; }
Kod HTML: