Выравнивание меню по центру в IE

Taatshi · July 28, 2012

Доброго всем времени суток.

Проблема: верхнее меню во всех браузерах, кроме любой версии IE находится по центру. В IE ну никак не могу выровнять. Что-то упустила, а что - не могу найти.

Беда в том, что ul меню растягивается в IE на всю допустимую ширину - на все 1000px - соответственно, его никак не удается отцентрировать.

Собственно код


</head>
	<body>
	<div id="all">
		<div id="headerback">
			<div id="header">
				страшная куча дивов)))
			</div> <!--end-header-->
		</div> <!--end-headerback-->

		<div id="main">
			<div id="senter">
				<div id="topmenu">
								здесь меню идет 
				</div><!--end-topmenu-->
				<div id="slider">
					<div id="sliderinner">										</div><!--end-sliderinner-->								
				</div><!--end-slider-->
				<div id="sidebars">

				дальше основной контент...

стили css


html,body 
{
    color: #000000;
    height:100%;
	font-size: 14px;
	font-family: verdana,arial,helvetica;
	background: url("../images/body.png") repeat transparent;
}


#all {
	margin: 0 auto;
	min-height: 100%;
	height:auto!important;
	height:100%;
	/*border: 1px solid red;*/
}

#headerback {
	margin: 0 auto;
	height:120px;
	background-color: #fff;
}

#header {
	margin: 0 auto;
	height:120px;
	width:1000px;
	background-color: #fff;
	/*outline: 1px solid blue;*/
}

#main {
	margin: 0 auto;
	background: url("../images/main.jpg") repeat-x transparent;
}

#senter {
	margin:0 auto;
	width: 1000px;
}

#topmenu {
	width:1000px;
	height: 36px;
    padding-top: 4px;
	text-align: center;
	background: url("../images/topmenu.jpg") repeat-x transparent;
}

#topmenu ul.menu li {
	float: left;
	height: 40px;
	list-style-type: none;
	/*padding-left:10px;
	padding-right:10px;
	padding-bottom:0px;
	padding-top:0px;*/
	position:relative;
	display: block;
}

#topmenu  li span {
display: block;
padding-left: 1px;
background: url("../images/sep.png") no-repeat top left transparent;
}

#topmenu ul.menu li a {
padding: 4px 10px 3px;
}

#topmenu ul.menu li  ul li a {
	text-decoration: underline;
}

#topmenu ul.menu li  ul span{
	background: none;
}

#topmenu ul.menu a {
	display: block;
	height: 22px;
	/*padding: 0 10px;*/
	overflow: hidden;
	color: #fff;
	font-family:Verdana;
	font-style:bold;
	font-size: 14px;
	text-decoration:none;
	padding-top:6px;
}
#topmenu ul.menu li.active a, #topmenu ul.menu li a:hover {
	color:#fff;
}

#topmenu ul.menu li:hover {
height:40px;
display: block;
z-index: 100;
background: url("../images/tophover.jpg") repeat-x top left transparent;
position: relative;
}

#topmenu ul.menu li:hover a {
height:47px;
background: url("../images/lihover.png") no-repeat top center transparent;	
position: relative;
z-index: 10000;
}


#topmenu ul.menu li a, #topmenu ul.menu li.active ul li a  {
	color:#fff;
}

#topmenu ul.menu li.active ul li  {
	background: none;
}

#topmenu ul.menu li ul {
    display:none;
    position:absolute;
    top:40px;
    left:-10px;
	list-style: none;
    padding:20px 0px 20px;
    /*margin:0px 0px 7px;*/
    background-color: black;
	min-width: 200px;
    opacity:0.75;
}

#topmenu ul.menu li:hover ul {
    display:block;
}

#topmenu ul.menu li:hover ul li, #topmenu ul.menu li:hover ul li a{
    height:auto;
	background: none;
} 

#topmenu ul.menu li:hover ul li a {float: left;}

Уже всю голову сломала... Не очень хочется пересобирать... Помогите, пожалуйста.

Спасибо.

Edited July 28, 2012 by Taatshi

Aleksey19881988 · July 29, 2012

у меня в ie7-9 всё одинаково как и в других браузерах отображается

bio · July 29, 2012


#topmenu ul { text-align:center; font-size:0;}
 #topmenu ul li { display:inline-block; font-size:14px; vertical-align:top; //display:inline; //zoom:1;}
  #topmenu ul li a, #topmenu ul li span {display:inline-block;}

Должно сработать

Sign In

Выравнивание меню по центру в IE

Question

Taatshi

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Aleksey19881988

Link to comment

Share on other sites

bio

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information