We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 6404
    • 24 Posts
    Доброго времени суток!

    http://new.themain.ru

    Делал меню в FF, работало все прекрасно (в Safari - тоже все ок). Но когда я залез в IE 6 ужаснулся, все работало через одно место.

    Помогите найти ошибку в коде.
    #ajaxmenu ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    
    	}
    
    #ajaxmenu ul li {
    	position: center;
    	float: left;
    	width:130px;
    	display: block;
    	text-decoration: none;
    	text-align: center;
    	font-weight: normal;
    }
    	
    #ajaxmenu ul li ul {
    	position: absolute;
    	left: 0; /* Set 0px less than menu width */
    	top:30px;
    	line-height: 38px;
    
    	}
    #ajaxmenu ul li a {
    	color: #FFFFFF;
    	font-weight: bold;
    }
    
    
    
    /* Styles for Menu Items */
    #ajaxmenu ul li.firstcategory {
    
    	color: #062E4B;
    	font-weight: bold;
    	height: 38px;
    	line-height: 38px;
    	padding-right: 0px;
    	padding-left: 0px;
    	background-image: url(http://new.themain.ru/remain/nav-bg-off.jpg);
    	background-repeat: repeat;
    	background-position: 0px;
    	margin: 0px;
    
    	}
    #ajaxmenu ul li.category {
    	color: #062E4B;
    	font-weight: bold;
    	height: 38px;
    	line-height: 38px;
    	padding-right: px;
    	padding-left: 0px;
    	background-image: url(http://new.themain.ru/remain/nav-bg-off.jpg);
    	background-repeat: repeat;
    	background-position: -130px;
    	margin: 0px;
    
    	}
    #ajaxmenu ul li.lastcategory {
    	color: #062E4B;
    	font-weight: bold;
    	height: 38px;
    	line-height: 38px;
    	padding-right: 0px;
    	padding-left: 0px;
    	background-image: url(http://new.themain.ru/remain/nav-bg-off.jpg);
    	background-repeat: repeat;
    	background-position: -222px;
    	margin: 0px;
    
    	}
    
    
    #ajaxmenu ul li.firstcategory:hover, #ajaxmenu ul li.firstcategory.over {
    	color: #fff;
    	background-image: url(http://new.themain.ru/remain/nav-press.jpg);
    }
    
    #ajaxmenu ul li.category:hover, #ajaxmenu ul li.category.over {
    	color: #fff;
    	background-image: url(http://new.themain.ru/remain/nav-press.jpg);
    }
    #ajaxmenu ul li.lastcategory:hover, #ajaxmenu ul li.lastcategory.over {
    	color: #fff;
    	background-image: url(http://new.themain.ru/remain/nav-press.jpg);
    }
    
    /* commented backslash \*/ 
    * html ul li a {height:1%}
    /* end hack */ 
    #ajaxmenu li a {
    	text-decoration: none;
    }
    
    /* hovered lists */
    #ajaxmenu li a, #ajaxmenu li.over a {
    	color: #fff;
    	width: 130px;
    	display: block;
    
    }
    #ajaxmenu li li a:hover, #ajaxmenu li.over li a:hover {
    	background-image: url(images/bullet_11x8_roll.gif)  !important;
    	color: #fff;
    	background-repeat: no-repeat;
    	background-color: #4e4e4e;
    	background-position: left center;
    	text-indent: 8pt;
    }
    
    /* set dropdown */
    #ajaxmenu li li a, #ajaxmenu li.over li a {
    	color: #ffffff;
    	background-image: url(images/bullet_11x8.gif) !important;
    	background-repeat: no-repeat !important;
    	text-align: left;
    	border-right: 0px solid #2f2f2f;
    	border-bottom: 0px solid #2f2f2f;
    	border-left: 0px solid #2f2f2f;
    	font-weight: normal;
    	width: 130px;
    	background-color: #000000;
    	background-position: left center;
    	text-indent: 8pt;
    }
    #ajaxmenu li ul li a {
    	background-image: url(images/sub_color_4x25.jpg);
    	background-repeat: repeat-x;
    	padding-top: 2px;
    	padding-bottom: 2px;
    	padding-right: 0px;
    	padding-left: 0px;
    } /* Sub Menu Styles */
    
    #ajaxmenu li ul, #ajaxmenu li.over ul { 
    	display: block; 
    } /* The pop */
    #ajaxmenu {
    	margin-right: auto;
    	margin-left: auto;
    	width: 930px;
    
    }
    
    #myajaxmenu {
    	position: absolute;
    	top:1px;
    	left: 0px;
    	display: block;
    	z-index: 1000;
    }






    Это в FF.

    Это в IE.

    В IE под меню выводится не горизонтально, а вертикально + при наведении мышью на кнопку, кнопка не "срабатывает". Вот сам сайт:
    http://new.themain.ru
      • 28814 ☆ A M B ☆
      • 1,086 Posts
      1. А кто Вам сказал, что эта проблема хоть как-то связана с MODx? Форумы по CSS дизайну.. в другом месте )
      2. Меню вертикальным должно быть. Что Вы будете делать, если в подменю будет больше 6 элементов?
      3. IE6 старается показать так, как оно должно быть, но.. IE7,FF2 стараются Вас понять и сделать так, как делать не стоит , но.. Opera 9.. хм, тут вообще аут.

      Совет: Расширения для FF: WebDeveloper, FireBug. Для IE: IE Developer Toolbar. Многие вопросы решатся мигом.
        Разработка сайтов и программных модулей на MODX.
        Опыт работы на MODx с 2005 года. Высокое качество.
        Компания Baltic Design Colors: http://www.bdcolors.ru.
        • 26586
        • 184 Posts
        Покопайтесь здесь
        http://www.cssplay.co.uk/menus/pro_dropline.html
          • 26586
          • 184 Posts
          это...
            <div id="outer">
              <div id="inner">
                <div id="right">
                  <div id="right-inner">
          ... ужастно, хотя и работает =)

          Поробуй лучше через minmax.js, а то как-то страшно становится

          И не понятно вообще зачем там такой огород, загляни в Collection of 40 CSS layouts/