ie6 меню

Nailya · August 27, 2012

Все привет!

У меня проблема с меню(#menu) в ie6: при наведении курсора на меню появляется ненужный отступ снизу,

а надо чтобы и меню было плотно прижато к нижней границы #header,

и при наведении курсора кнопка также увеличивалась снизу(menu a{padding:2px 20px 0;}),

наезжая на границу

<!doctype html>
<html><head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="basecss.css" type="text/css"> 
  <link rel="stylesheet" href="css_to_for_m.css" type="text/css">
  <!--[if IE 6]>
<link href="ie.css" type="text/css" rel="stylesheet">
<![endif]-->
</head>
<body>
<div id="container">

	<div id="main">
		<div id="header">
			<div id="header-inner">
					<div id="logo"></div>
					<div id="menu">
							<ul>
								<li class="on"><a href="#">menu</a></li>
								<li class="on"><a href="#">menu</a></li>
								<li class="on"><a href="#">menu</a></li>
								<li class="on"><a href="#">menu</a></li>
								<li class="on"><a href="#">menu</a></li>
							</ul>
					</div><!-- end menu -->
			</div><!-- end header-inner -->
		</div><!-- end header -->
		<div id="all">
		text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>end</div><!-- end all -->

	</div><!-- end main -->
	<div id="footer"></div>


</div><!-- end container -->
</body>
</html>

html,body{
	height:100%;
	background:#545c66;
}
body{
   font-size:small;
   font-family:Helvetica, Arial, sans-serif;
}
#container{
	width:800px;
	background-image:url(pic/bg.png);
	margin:0 auto;
	min-height:100%;
	position:relative;
}
#main{
	width:600px;
	background:#fff;
	margin:0 auto;
}
#all{
	padding:0 0 90px;
	overflow:hidden;	 
}
#footer{
	width:600px;
	margin:0 0 0 100px;
	height:90px;
	background:#535961;
	position:absolute;
	bottom:0;
}
#header{
	width:600px;
	margin:auto;
	height:120px;
	border-bottom:1px solid #ccc;
	background:#535961;
}
#header-inner{
	overflow:hidden;

}
#logo{
	float:left;
	position:relative;
	left:10px;
	top:10;
	width:160px;
	height:80px;
	background:url(pic/logo4.gif) no-repeat 100% 10%;
}
#logo:after{
	content:'обучение системному администрированию';
	display:block;
	color:#94938f;
	position:relative;
	left:30px;
	top:50px;
	font-size:.9em;
}
#menu{
	margin:95px 0px 0 160px;
}
#menu li{
	float:left;
	background:#757a98 url(pic/left.png) no-repeat 100% 0;
	margin-right:5px;
}	
#menu a{
	padding:2px 20px 0;
	line-height:25px;
	text-transform:uppercase;
	text-decoration:none;
	color:#e1e5ff;
	font-style:none;
	font-weight:bold;
}
#menu li a:hover{
	display:inline-block;
	color:#79786e;
	background:#d7d9dc;
}

wwt · August 27, 2012

эм попробуйте для ie6 в ie.css дописать отрицательный margin-bottom для li


#menu li{
        margin-bottom:-2px;
}

чтобы оттестить мона хаком в основном файле стилей попробовать сначала.


#menu li{
        float:left;
        background:#757a98 url(pic/left.png) no-repeat 100% 0;
        margin-right:5px;
        *margin-bottom:-2px;
}

Edited August 27, 2012 by wwt

Nailya · August 27, 2012

эм попробуйте для ie6 в ie.css дописать отрицательный margin-bottom для li
#menu li{
        margin-bottom:-2px;
} 
чтобы оттестить мона хаком в основном файле стилей попробовать сначала.
#menu li{
        float:left;
        background:#757a98 url(pic/left.png) no-repeat 100% 0;
        margin-right:5px;
        *margin-bottom:-2px;
} 

Получилось,как просто, спасибо.

А как сделать, чтобы в ie6 при наведении курсора на меню, кнопка увеличивалась снизу, наезжая на белый фон(это основной блок #main),как в остальных браузерах

Sign In

ie6 меню

Question

Nailya

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

wwt

Link to comment

Share on other sites

Nailya

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information