Ширина блока в IE

Mila · January 13, 2009

У меня возникла проблема с шириной блоков в сайтбаре.

В IE они почему то намного шире, чем нужно.

На изменение ширины IE не реагирует. Не могу понять, с чем это связано.

Для простоты, я вынесла код сайтбара отдельно:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
  <title></title> 
  <style type="text/css">   
body {   
		margin-left:auto;
		margin-right:auto;
			width: 100%;
		height: 100%;	
		background-color: #fff; 
}
#sidebar {
		float: left;
		width: 405px;
		font: normal 12px/18px "Century Gothic", Verdana;
		color: #ffffff;
		margin: 70px 0 0 50px;
}
#sidebar a {
		color: #951515;
		text-decoration: none;
}
#sidebar a:hover {
		text-decoration: underline;
}
#sidebar #sidebar-left {
		float: left;
		width: 195px;
		margin: 0;
		padding: 0;
}
#sidebar #sidebar-right {
		float: right;
		width: 195px;
		margin: 0;
		padding: 0;
}
#sidebar .sidebar-box {
		width: 195px;
		margin: 0 0 25px 0;
		padding: 0;
		background-color: #951515;
}
#sidebar .sidebar-box-blank {
		width: 195px;
		margin: 0 0 25px 0;
		padding: 0;
}
#sidebar h3 {
		height: 50px;
		width: 195px;
		padding-left: 40px;
		font: bold 17px/36px "Century Gothic", Verdana;
		color: #ffffff;
		background: url("images/sidebar_title.jpg") no-repeat;
}
#sidebar ul {  
		line-height: normal;
		margin: 0;
		padding: 0 0 25px 0;
		list-style-type: none;
}
#sidebar ul li {			
		color: #ffffff;
		font: normal 14px/36px "Century Gothic", Verdana;
		margin: 0;
		padding: 0 0 -10px 0;
}
#sidebar ul li a {
		line-height: 2;
		color: #ffffff;
		text-decoration: none;
		padding-left: 15px;
		display: block;
		background: url("images/sidebar_menu.gif") no-repeat left bottom;
}
#sidebar ul li a:hover {
		color: #000000;
		font-weight: bold;
		text-decoration: none;
		background: #FFD44A;
		display: block;			
}
*html #sidebar ul li a {
		height: 36px;
}
</style> 
</head> 
<body> 
<div id="sidebar">					
	<div id="sidebar-left"><!-- Sidebar Left -->			
		<div class="sidebar-box">
			   <h3>Последнее</h3>
		 <ul>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
		 </ul>   
		</div>				
	</div><!-- /Sidebar Left -->	

	<div id="sidebar-right"><!-- Sidebar Right -->			
		<div class="sidebar-box">
				<h3>Архивы</h3>
		 <ul>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
			 <li><a href="">Ссылка </a></li>
		 </ul>   
		</div>
	</div><!-- /Sidebar Right -->

</div><!-- Sidebar -->
 </body> 
</html>

Пожалуйста, помогите, разобраться.

Edited January 13, 2009 by Mila

Vlad · January 14, 2009

Не надо лишнюю ширину задавать, все встанет как надо тогда.

#sidebar .sidebar-box {

width: 195px; /* Убрать */

}

#sidebar .sidebar-box-blank {

width: 195px; /* Убрать */

}

#sidebar h3 {

width: 195px; /* Убрать */

}

3ABAPKA · January 14, 2009

Есть код

#sidebar ul li {			
		color: #ffffff;
		font: normal 14px/36px "Century Gothic", Verdana;
		margin: 0;
		padding: 0 0 -10px 0;
}

если изменить 36 рх на 16 в IE будет также как в FF

#sidebar ul li {			
		color: #ffffff;
		font: normal 14px/16px "Century Gothic", Verdana;
		margin: 0;
		padding: 0 0 -10px 0;
}

Edited January 14, 2009 by 3ABAPKA

Mila · January 14, 2009

Спасибо, помогло - все стало на место.

SelenIT · January 14, 2009

Насколько я в курсе, паддинг вообще отрицательным быть не может.

Sign In

Ширина блока в IE

Question

Mila

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

3ABAPKA

Link to comment

Share on other sites

Mila

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information