Как всегда проблема IE

[tree85]

Всем день добрый!, у меня такая проблема, разъехались все элементы, находящиеся в тэгах li(т.е. все показывает в столбик, а не в строку), применял display: inline-block - не помогает, помогает только float:left, но и то не слишком корректно все отображается, при этом, у меня двухуровневое меню на css, так там все пункты в развернутом виде отображаются, без background и свойст шрифта...? что делать? подскажите пложалуйста..? Ну, говорить, что во всех других браузерах всё отображается отлично, я думаю не стоит.!! Посмотреть как выглядит можно http://itmag.es/5iNxx

и как оно выглядит в рабочем варианте http://itmag.es/5rheU

CSS

.hor li, li.hor {display: inline-block;}

#mainMenu {
	margin: 0 31px 0 148px;
	cursor: default;
	background-color: #f2f2f2;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#767574));
    background-image: -moz-linear-gradient(#f2f2f2, #767574);
    background-image: -o-linear-gradient(#f2f2f2, #767574);
    background-image: linear-gradient(#f2f2f2, #767574);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f2f2f2', EndColorStr='#767574');
	position: relative;
	z-index: 5;
}

#mainMenu li[class|="mainMenuLi"] {
	margin-left: -1px;
}

#mainMenu li.mainMenuLi-1 {margin-left: 0px;}

#mainMenu li[class|="mainMenuLi"] > a {
	display: block;
	width: 164px;
	height: 36px;
	background: url(css/images/mainMenu.png) 0 0 no-repeat;
	text-align: center;
	text-transform: uppercase;
	font-family: PragmaticaCondCTT;
	font-size: 90%;
	line-height: 2.8em;
	color: #58595b;
    position: relative;
}

#mainMenu li.mainMenuLi-1 > a {background-position: 0 0;display: block;}

#mainMenu li.mainMenuLi-2 > a {background-position: -164px 0;display: block;}
#mainMenu li.mainMenuLi-3 > a {background-position: -328px 0;display: block;}
#mainMenu li.mainMenuLi-4 > a {background-position: -492px 0;display: block;}
#mainMenu li.mainMenuLi-5 > a {background-position: -656px 0;display: block;}
#mainMenu li.mainMenuLi-6 > a {background-position: -820px 0;display: block;}

#mainMenu li[class|="mainMenuLi"] > a:hover,
#mainMenu li[class|="mainMenuLi"]:hover > a {
	color: #ffffff;
}

#mainMenu li.mainMenuLi-1 > a:hover, #mainMenu li.mainMenuLi-1:hover > a {background-position: 0 -36px;}
#mainMenu li.mainMenuLi-2 > a:hover, #mainMenu li.mainMenuLi-2:hover > a {background-position: -164px -36px;}
#mainMenu li.mainMenuLi-3 > a:hover, #mainMenu li.mainMenuLi-3:hover > a {background-position: -328px -36px;}
#mainMenu li.mainMenuLi-4 > a:hover, #mainMenu li.mainMenuLi-4:hover > a {background-position: -492px -36px;}
#mainMenu li.mainMenuLi-5 > a:hover, #mainMenu li.mainMenuLi-5:hover > a {background-position: -656px -36px;}
#mainMenu li.mainMenuLi-6 > a:hover, #mainMenu li.mainMenuLi-6:hover > a {background-position: -820px -36px;}

#mainMenu li[class|="mainMenuLi"] div.secondMenuWrapper {

	position: absolute;
	top: 36px;
	left: 0;
	width: 955px;
	padding: 0 22px;
	background-color: #4c4847;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4c4847), to(#332e2c));
    background-image: -moz-linear-gradient(#4c4847, #332e2c);
    background-image: -o-linear-gradient(#4c4847, #332e2c);
    background-image: linear-gradient(#4c4847, #332e2c);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4c4847', EndColorStr='#332e2c');
}

#mainMenu li.mainMenuLi-1 div.secondMenuWrapper {border-top: 4px solid #da251d;}
#mainMenu li.mainMenuLi-2 div.secondMenuWrapper {border-top: 4px solid #e98e28;}
#mainMenu li.mainMenuLi-3 div.secondMenuWrapper {border-top: 4px solid #f8df11;}
#mainMenu li.mainMenuLi-4 div.secondMenuWrapper {border-top: 4px solid #97cc2b;}
#mainMenu li.mainMenuLi-5 div.secondMenuWrapper {border-top: 4px solid #0084ca;}
#mainMenu li.mainMenuLi-6 div.secondMenuWrapper {border-top: 4px solid #842378;}

#mainMenu li[class|="mainMenuLi"] > a:hover + div.secondMenuWrapper,
#mainMenu li[class|="mainMenuLi"] > div.secondMenuWrapper:hover {
	display: block !important;
}

#mainMenu li[class|="mainMenuLi"] ul.secondMenu {
	position: relative;
}

#mainMenu li.mainMenuLi-1 ul.secondMenu {padding-left: 0;}
#mainMenu li.mainMenuLi-2 ul.secondMenu {padding-left: 100px;}
#mainMenu li.mainMenuLi-3 ul.secondMenu {padding-left: 200px;}
#mainMenu li.mainMenuLi-4 ul.secondMenu {padding-left: 300px;}
#mainMenu li.mainMenuLi-5 ul.secondMenu {padding-left: 400px;}
#mainMenu li.mainMenuLi-6 ul.secondMenu {padding-left: 500px;}

#mainMenu li[class|="mainMenuLi"] ul.secondMenu li a {
	text-align: center;
	text-transform: uppercase;
	font-family: PragmaticaCondCTT;
	height: 28px;
	padding: 0 12px;
	color: #ffffff;

	line-height: 1.9em;
 }

#mainMenu li.mainMenuLi-1 ul.secondMenu li a:hover {
	background-color: #da251d;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#da251d), to(#c9261d));
    background-image: -moz-linear-gradient(#da251d, #c9261d);
    background-image: -o-linear-gradient(#da251d, #c9261d);
    background-image: linear-gradient(#da251d, #c9261d);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#da251d', EndColorStr='#c9261d');
}

#mainMenu li.mainMenuLi-2 ul.secondMenu li a:hover {
	background-color: #e98e28;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e98e28), to(#e77d21));
    background-image: -moz-linear-gradient(#e98e28, #e77d21);
    background-image: -o-linear-gradient(#e98e28, #e77d21);
    background-image: linear-gradient(#e98e28, #e77d21);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e98e28', EndColorStr='#e77d21');
}

.

.

.

HTML

<ul id="mainMenu" class="hor noUnd">
	<li class="mainMenuLi-1">
	      <a href="#">Лого / Фирменный стиль</a>
	      <div class="secondMenuWrapper">
	            <ul class="secondMenu hor">
		         <li><a href="#">Дизайн логотипов</a></li>
		         <li><a href="#">Фирменный стиль</a></li>
		         <li><a href="#">Персонажи</a></li>
	           </ul>
	     </div>
	</li>
	<li class="mainMenuLi-2">
		<a href="#">Реклама / Визуализация</a>
		<div class="secondMenuWrapper">
		     <ul class="secondMenu hor">
			 <li><a href="#">Дизайн логотипов</a></li>
			 <li><a href="#">Фирменный стиль</a></li>
			 <li><a href="#">Персонажи</a></li>
		     </ul>
		</div>
	</li>

.

.

.

Edited June 4, 2012 by tree85
Для кода есть тег CODE

[Bonzash]

Оформите код правильно

[tree85]

Оформите код правильно

не понял, что вы имеете ввиду?

[clavin]

Во-первых, когда речь идёт об IE, всегда стоит упомянуть его версию.

Во-вторых, в IE6 display:inline-block;, если не ошибаюсь, задаётся таким образом:

display:inline;
zoom:1;

[tree85]

Во-первых, когда речь идёт об IE, всегда стоит упомянуть его версию.

Во-вторых, в IE6 display:inline-block;, если не ошибаюсь, задаётся таким образом:

display:inline;
zoom:1;

Версия IE 7-8-9 во всех версиях одно и тоже!

Ваш вариант никакой реакции не произвел.

Edited June 4, 2012 by tree85

[clavin]

Оформи код здесь: jsfiddle.net/. Может что и видно будет.

[tree85]

Оформи код здесь: jsfiddle.net/. Может что и видно будет.

Попробовал оформить, но у меня получается,что выводится только хедер и футер..Не пойму в чем причина, может подскажите , буду премного благодарен..!!

Я делаю так: беру весь код между <body><body> и вставляю в окно с надписью html, ну и весь код css в окно css затем жму Run и мне выводится, только хедер и футер, без контента..? Может что еще надо? я ничего больше там не делал и ничего не изменял..